当前位置:  开发笔记 > 编程语言 > 正文

捕获<ng-content>中的组件发出的事件?

如何解决《捕获<ng-content>中的组件发出的事件?》经验,为你挑选了0个好方法。

我有一个用于转换内容的自定义模态组件:

@Component({
  selector: 'modal-container',
  template: `
    
` }) export class ModalContainerComponent { . . . }

我的内容中有一个发出open事件的组件:

@Component({
  selector: 'login-modal',
  template: `
    
      
...
`, }) export class LoginModalComponent implements OnInit { @Output() open = new EventEmitter(); ngOnInit(): void { // Here I am checking an ngrx store with code that is not included if (state.openLoginModal) { this.open.emit(); } } }

然而,ModalContainerComponent永远不会收到这个事件.

例如:

如何观察ng-content中的输入元素变化

Angular 2:从ng-content中捕获事件

即将到来.我究竟做错了什么?


更新:

由于@Output事件没有冒泡,我决定使用自定义指令来发出事件:

import { Directive, ElementRef, Renderer } from '@angular/core';


@Directive({
  selector: '[open-modal]',
  host: { '(click)': 'openModal()' }
})
export class OpenModalDirective {

  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer
  ) {}

  openModal(): void {
    this.renderer.invokeElementMethod(this.elementRef.nativeElement,
      'dispatchEvent',
      [new CustomEvent('open-modal-container', { bubbles: true })]);
  }

}

使用:在Angular2中如何知道何时输入字段丢失焦点作为示例.

但是,我仍然无法拿起自定义事件ModalContainerComponent:

@HostListener('open-modal-container')
openModalContainer(): void {
  console.log('openModal() was invoked');
}

我可以记录click事件,这样就发生了,但主机监听器失败了.思考?


更新2

我放弃了这种方法,转而使用共享服务,但我遇到的问题是.next()没有向订户提供价值:订阅者没有从.next()获得价值

推荐阅读
ar_wen2402851455
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有