web-dev-qa-db-ja.com

Angular 2：コンポーネントの相互作用、オプションの入力パラメーター

子コンポーネントで使用可能な@Inputパラメーターを使用して、親が特定のデータを子コンポーネントに渡したい実装があります。ただし、このデータ転送はオプションであり、親は要件に従ってそれを渡す場合と渡さない場合があります。コンポーネントにオプションの入力パラメーターを含めることは可能ですか？以下にシナリオを説明しました。

 <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

次のように（？）演算子を使用できます

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() { }

}

子コンポーネントを使用する親コンポーネントは次のようになります

@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

入力値はデフォルトでオプションです。実際に渡されない入力のプロパティにアクセスしようとすると、コードは失敗します（これらの入力はundefinedであるため）。

OnChanges を実装するか、入力をプロパティではなくセッターにして、値が実際に渡されたときにコードを実行させることができます。

export class child {

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

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

ここには2つのオプションがあります。

1）入力が空のときに子を表示する必要がない場合、子で*ngIfを使用できます。

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

2）入力なしで子が表示される場合、変更されたセッターを使用して入力変数の存在を確認できます `

Child.tsで：

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