2
閉じるボタンをクリックしたときにページから削除できるコンポーネントがあります。私はtestClose
イベントを公開しました。これは、コンポーネントが閉じられたときにユーザーが何らかの作業を行うために登録できるイベントです。コンポーネントが閉じられたときに関数を呼び出すには、そのイベントにどのように登録すればよいですか?たとえば、TestComponentが閉じられたときにcloseCounterを1増やしたいとします。イベントを公開し角2は、イベントが発生したときに関数/メソッドを呼び出す
https://plnkr.co/edit/iGyzIkUQOTCGwaDqr8o0?p=preview
TestComponent:
import {Component, Input, Output, EventEmitter} from 'angular2/core';
@Component({
selector: 'test',
template: `
<div class="box" *ngIf="!_close">
<button class="close" (click)="close()">x</button>
</div>
`,
styles:[
`
.box{
background: yellow;
height: 100px;
width: 100px;
}
`
]
})
export class TestComponent{
@Input("testClose") _close = false;
@Output("testCloseChange") _closeChange = new EventEmitter<boolean>(false);
close(): void{
this._close = true;
this._closeChange.emit(true);
}
open(): void{
this._close = false;
this._closeChange.emit(true);
}
}
アプリケーションコンポーネントのいくつかの機能を呼び出すためにTestComponentのクローズイベントに登録する必要があります。ここplnkrです。
import {Component} from 'angular2/core';
import {TestComponent} from './test.component';
@Component({
selector: "my-app",
template: `
<div class="container">
<test [testClose]="isClose"></test>
Close Count: {{closeCount}}
</div>
`,
directives: [TestComponent]
})
export class AppComponent{
isClose: boolean = false;
closeCount: number = 0;
incrementClose(): void{
this.closeCount++;
}
}
Out最初に同じ質問が出たのを見るのは初めてではないので、誰かがなぜ**イベントリスナーをテンプレートに追加する必要があるのか知っていますか?私は明白な何かを欠いていますか – Nobita
しかし、親コンポーネントがそれを聞いていない場合、子コンポーネントが特定のイベントをいつ放出したかはどのように分かりますか? –
聴いてみたいイベントを決定するのは親コンポーネントです。 –