关于Typescript：angular4带自定义事件的dispatchEvent


Angular 4 dispatchEvent with custom event

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

我在这里使用第一个答案作为参考：angular2手动触发特定元素上的点击事件

如果我尝试这样做，效果很好：

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

在父组件中，我这样写：

1
(click)="go()"

当上面的代码发生时，它到达go方法。

但是如果我使用一些自定义事件名称来完成此操作，例如：

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

并在父组件中：

1
(customEvent)="go()"

如何使用自定义事件？

相关讨论

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

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

柱塞示例

相关讨论

使用@Output()在组件??内部具有自定义事件。在下面的示例中，它是在单击div时触发的，但是显然可以使它在任何时候发出。尽量避免使用nativeElement，因为这将阻止在任何其他环境中运行应用程序，但浏览器

父母

1
2
3
4
5
6
7
8
9
10
@Component({
   selector: 'parent',
   template: `<child (customEvent)="onCustomEvent($event)"></child>
})
export class ParentComponent {

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

孩子

1
2
3
4
5
6
7
8
9
10
@Component({
   selector: 'child',
   template: `
})
export class ChildComponent {

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

}