子コンポーネントで使用可能な@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() { }
}
次のように(?)演算子を使用できます
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'
}
}
入力値はデフォルトでオプションです。実際に渡されない入力のプロパティにアクセスしようとすると、コードは失敗します(これらの入力はundefined
であるため)。
OnChanges を実装するか、入力をプロパティではなくセッターにして、値が実際に渡されたときにコードを実行させることができます。
export class child {
@Input set showName(value: boolean) {
this._showName = value;
doSomethingWhenShowNameIsPassed(value);
}
constructor() { }
}
ここには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; }