在Angular 2中,如何使用Typescript中的ViewChild将EventEmitter分配给其方法处理程序?
使用HTML处理来自EventEmitter的事件:
my.component.html
<some-component [someProperty]="myProperty" (onSomeEvent)="myMethod($event)></some-component>
Run Code Online (Sandbox Code Playgroud)
my.component.ts
export class MyComponent {
public myProperty: string;
...
public myMethod(event: any) {
... //handle event
}
...
}
Run Code Online (Sandbox Code Playgroud)
我更喜欢处理事件(在Typescript中):
my.component.html
<some-component #someComponent></some-component>
Run Code Online (Sandbox Code Playgroud)
my.component.ts
export class MyComponent {
@ViewChild('someComponent') someComponent: SomeComponent;
ngOnInit() {
this.someComponent.someProperty = myProperty;
this.someComponent.onSomeEvent = ? <-- How do I assign EventEmitter?
}
public myProperty: string;
...
public myMethod(event: any) {
... //handle event
}
...
}
Run Code Online (Sandbox Code Playgroud)
一个月后,当我再次遇到问题并偶然在搜索中重新发现我自己的问题时,想出了这个.
因为Angular的EventEmitters利用了observable,所以他们只是订阅了Observable.如果要在组件打字稿中分配处理程序,也可以这样做.
从我上面的例子:
export class MyComponent {
@ViewChild('someComponent') someComponent: SomeComponent;
ngOnInit() {
this.someComponent.someProperty = myProperty;
this.someComponent.onSomeEvent.subscribe(event => this.myMethod(event));
}
public myProperty: string;
...
public myMethod(event: any) {
... //handle event
}
...
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1363 次 |
| 最近记录: |