@Input @OutputによるAngular2コンポーネント間の通信の例

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

この記事では、@ Input @Output通信の例を通してAngular2コンポーネントを紹介し、次のように全員と共有します。

親コンポーネントは子コンポーネントに渡されます。

子コンポーネントは@Inputプロパティを設定し、親コンポーネントはhtmlプロパティを設定することによって子コンポーネントに値を渡すことができます。

サブコンポーネント:


@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}

上記のコードは、親コンポーネントに渡すことができる2つのプロパティtitleとnameを設定します。nameプロパティが設定されると、set name(name:string)メソッドが実行されます。コードの宣言は可能です。

親コンポーネントが呼び出されます。


<app-header [title]="title" name="姓名"></app-header>

2つの呼び出しメソッドがあります。属性名のタイトルは角カッコで囲まれ、titleの値は親コンポーネントのオブジェクト名で、名前は角カッコではなく、後者の値は子コンポーネントに渡される文字列です。 もちろん、{{name}}を使用して角括弧を使用せずにオブジェクトの値を渡すことができます。

着信プロパティーの値の変更をリスニングする場合は、子コンポーネントにOnChanges(@ angular / core)インターフェースを実装できます。


export class HeaderComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
console.log(changes['title']);
}
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
}

SimpleChangesは、プロパティ名をキーとする配列です。オブジェクトはプロパティ名によって取得され、オブジェクトにはpreviousValue(currentValue)の値が格納されます。

親コンポーネントのリスナーサブコンポーネントの変更

子コンポーネントは、@Output()を介してEventEmitterを公開します。親コンポーネントは、子コンポーネントが宣言されたときにEventEmitterコールバックメソッドを追加します。

サブコンポーネント:


export class HeaderComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges): void {
console.log(changes['title']);
}
@Input() title:string;
_name:string = '';
@Input() set name(name:string) {
this._name=(name&&name.trim())||'';
}
//声明事件发射器
@Output() checkEmitter=new EventEmitter<boolean>();
//用于绑定checkbox的checked属性
isChecked=true;
toggle() {
this.isChecked=!this.isChecked;
//发射事件
this.checkEmitter.emit(this.isChecked);
}
}

サブコンポーネントテンプレート:


<p>
{{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>

親コンポーネントで宣言されている:

コードを次のようにコピーします。
<app-header [title] = "title" name = "{{name}}"(checkEmitter)= "onCheckedChange($ event)"> </ app-header>

親コンポーネントのイベントコールバック受信:


export class AppComponent implements AfterViewInit{
ngAfterViewInit() {
}
onCheckedChange(isChecked:boolean) {
console.log("checkbox选中状态:"+isChecked);
}
}

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ