我有一个用于
转换内容的自定义模态组件:
@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事件,这样就发生了,但主机监听器失败了.思考?
我放弃了这种方法,转而使用共享服务,但我遇到的问题是.next()
没有向订户提供价值:订阅者没有从.next()获得价值