从结构指令向父组件发射事件不起作用
Emitting event from structural directive to parent component does not work
作为问题的跟进:
看起来当结构指令发出事件时,父组件没有接收到它。
@Directive({ selector: '[appWidget]' })
export class WidgetDirective implements OnInit{
@Output() wdgInit: EventEmitter<any> = new EventEmitter();
@Input() set appWidget (wdg: any) {
//display stuff
}
ngOnInit {
this.wdgInit.emit();
}
widget.component.html:
<ng-container *ngFor="let wdg of widgets">
<div *appTwitterWidget="wdg" >
<ng-container>
widgetContainer.component.html:
<app-widget [widgets]="widgetList" (wdgInit)="containerDoSomthing()"></app-widget>
在这种情况下,我发现 containerDoSomthing() 从未被调用过。
我认为不可能将 EventEmitter 添加到结构指令中,因为指令引用的本机元素始终是注释!
这可能是由于这个事实,事件从一开始就不会在 DOM 中生成...但这不是属性指令的问题,因为它们位于适当的 DOM元素.
有可能。问题是当前的 Angular 5.2.6 仍然不支持 @Output
结构指令绑定,如果像问题中一样使用加糖星号 (*) 语法(参见 GitHub issue)。
要使其正常工作,您必须将其转换为 de-sugarized 形式 (see here),如下所示:
<ng-template [appWidget]="wdg" (wdgInit)="containerDoSomthing($event)"></ng-template>
作为问题的跟进:
看起来当结构指令发出事件时,父组件没有接收到它。
@Directive({ selector: '[appWidget]' })
export class WidgetDirective implements OnInit{
@Output() wdgInit: EventEmitter<any> = new EventEmitter();
@Input() set appWidget (wdg: any) {
//display stuff
}
ngOnInit {
this.wdgInit.emit();
}
widget.component.html:
<ng-container *ngFor="let wdg of widgets">
<div *appTwitterWidget="wdg" >
<ng-container>
widgetContainer.component.html:
<app-widget [widgets]="widgetList" (wdgInit)="containerDoSomthing()"></app-widget>
在这种情况下,我发现 containerDoSomthing() 从未被调用过。
我认为不可能将 EventEmitter 添加到结构指令中,因为指令引用的本机元素始终是注释!
这可能是由于这个事实,事件从一开始就不会在 DOM 中生成...但这不是属性指令的问题,因为它们位于适当的 DOM元素.
有可能。问题是当前的 Angular 5.2.6 仍然不支持 @Output
结构指令绑定,如果像问题中一样使用加糖星号 (*) 语法(参见 GitHub issue)。
要使其正常工作,您必须将其转换为 de-sugarized 形式 (see here),如下所示:
<ng-template [appWidget]="wdg" (wdgInit)="containerDoSomthing($event)"></ng-template>