有自定義事件的角4 dispatch事件

Question

我的需求是從事件代碼觸發父宿主組件。

我這裏使用的第一個答案作爲參考：angular2 manually firing click event on particular element

如果我試試這個，它工作得很好：

this.itemHost.viewContainerRef.element.nativeElement.dispatchEvent(new Event('click')); 

在父組件我寫了這個：

(click)="go()" 

當上面的代碼出現時，它到達go方法。

但是，如果我有一些自定義的事件名稱做了，比如這不起作用：

this.itemHost.viewContainerRef.element.nativeElement.dispatchEvent(new Event('customEvent')); 

，並在父組件：我如何與自定義事件做

(customEvent)="go()" 

？

Answer 1

您的活動不冒泡。試試看：

.dispatchEvent(new Event('customEvent', { bubbles: true })); 

Plunker Example

Answer 2

使用@Output()有你的組件中自定義事件。在下面的例子中，它是在點擊div時被觸發的，但是你顯然可以隨時發出它。儘量避免使用nativeElement儘可能多的，因爲這將防止運行在任何其他環境中應用程序，但是瀏覽器

父

@Component({ 
    selector: 'parent', 
    template: `<child (customEvent)="onCustomEvent($event)"></child> 
}) 
export class ParentComponent { 

    onCustomEvent(response: string): void { 
    console.log(response); 
    } 
} 

孩子

@Component({ 
    selector: 'child', 
    template: `<div (click)="customEvent.emit('blabla')"></div> 
}) 
export class ChildComponent { 

    @Output() 
    customEvent: EventEmitter<string> = new EventEmitter<string>(); 

}