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>(); }

具有自定义事件的Angular 4 dispatchEvent

2 个答案: