角2; 使用Typescript而不是HTML中的ViewChild将方法分配给EventEmitter?

Dan*_*ick 1 angular

在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)

Dan*_*ick 7

一个月后,当我再次遇到问题并偶然在搜索中重新发现我自己的问题时,想出了这个.

因为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)