web-dev-qa-db-fra.com

Angular 2: interaction de composant, paramètres d'entrée facultatifs

J'ai une implémentation où parent veut transmettre certaines données au composant enfant via l'utilisation de @Input paramètre disponible sur le composant enfant. Cependant, ce transfert de données est une option et le parent peut ou non le transmettre conformément aux exigences. Est-il possible d'avoir des paramètres d'entrée optionnels dans un composant? J'ai décrit un scénario ci-dessous:

 <parent>
    <child [showName]="true"></child> //passing parameter
    <child></child> //not willing to passing any parameter
</parent>



//child component definition
@Component {
    selector:'app-child',
    template:`<h1>Hi Children!</h1>
          <span *ngIf="showName">Alex!</span>`
}


export class child {

    @Input showName: boolean;

    constructor() { }

}
angularangular2-components
39
Sumit Agarwal

Vous pouvez utiliser l'opérateur (? ) comme ci-dessous

import {Component,Input} from '@angular/core';
@Component({
    selector:'child',
    template:`<h1>Hi Children!</h1>
          <span *ngIf="showName">Alex!</span>`
})


export class ChildComponent {

    @Input() showName?: boolean;

    constructor() { }

}

Le composant parent qui utilise le composant enfant sera le suivant:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <child [showName]="true"></child>
      <child ></child>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

LIVE DEMO

75
Aravind

Les valeurs d'entrée sont facultatives par défaut. Votre code n'échouera que lorsqu'il tentera d'accéder aux propriétés des entrées qui ne sont pas réellement transmises (puisque ces entrées sont undefined).

Vous pouvez implémenter OnChanges ou faire de l'entrée un sélecteur au lieu d'une propriété pour que votre code soit exécuté lorsqu'une valeur est réellement transmise.

export class child {

    @Input set showName(value: boolean) {
      this._showName = value;
      doSomethingWhenShowNameIsPassed(value);
    }

    constructor() { }
}
23
Günter Zöchbauer

Vous avez deux options ici.

1) Vous pouvez utiliser un *ngIf sur l'enfant si l'enfant n'a pas besoin d'être affiché lorsque l'entrée est vide.

 <parent>
    <child *ngIf="true" [showName]="true"></child> //passing parameter
    <child></child> //not willing to passing any parameter
</parent>

2) Au cas où l'enfant devrait être affiché sans aucune entrée, vous pouvez utiliser un outil de configuration modifié pour vérifier la présence de variables d'entrée`

Dans l'enfant.ts:

private _optionalObject: any;
@Input()
set optionalObject(optionalObject: any) {
    if(optionalObject) this._optionalObject = optionalObject;
}
get optionalObject() { return this._optionalObject; }
1
Alexander Ciesielski