Angulaire 2: interaction des composants, paramètres d'entrée facultatifs

Question

J'ai une implémentation où le parent souhaite transmettre certaines données au composant enfant via l'utilisation du paramètre @Input disponible sur le composant enfant. Cependant, ce transfert de données est facultatif et le parent peut ou non le transmettre conformément à l'exigence. 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() { }

}
 

Answer 1

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 comme

 @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'
  }
}
 

DÉMO EN DIRECT

Answer 2

Les valeurs d'entrée sont en option par défaut. Votre code suivant ne fonctionnera pas uniquement lorsqu'il tente d'accéder aux propriétés des entrées qui ne sont pas réellement passé (car ces entrées sont undefined).

Vous pouvez mettre en œuvre OnChanges ou faire de la saisie d'un setter au lieu d'une propriété afin d'obtenir votre code exécuté lorsqu'une valeur est réellement passé.

export class child {

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

    constructor() { }
}

Answer 3

Vous avez deux options ici.

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

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

2) Dans le cas où l'enfant devrait s'afficher sans aucune entrée, vous pouvez utiliser un setter modifié pour vérifier la présence de variables d'entrée`

Chez l'enfant.ts:

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