带有自定义事件的Angular 4 dispatchEvent答案

【问题标题】：Angular 4 dispatchEvent with custom event带有自定义事件的Angular 4 dispatchEvent
【发布时间】：2017-12-31 01:26:26
【问题描述】：

我的要求是从代码触发事件到父托管组件。

我在这里使用第一个答案作为参考：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()"

如何使用自定义事件来做到这一点？

【问题讨论】：

你必须使用Output()装饰器
我试过但没有成功。你能举个例子如何声明它？

标签： angular typescript events

【解决方案1】：

您的活动没有冒泡。试试看：

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

Plunker Example

【讨论】：

我也可以在这里传递事件参数吗？
是的，使用细节
我应该把它放在哪里？
这里是示例stackoverflow.com/questions/42957305/…
在这种情况下使用 CustomEvent plnkr.co/edit/pp6sgnrmtdoY2c7Wzh8h?p=preview

【解决方案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>();

}

【讨论】：