ngOnInit初始化Angular中组件内部的EventEmitter变量是否为时已晚

Question

我尝试使用以下子组件类

@Component({
selector: 'child',
templateUrl: './child.component.html'
})
export class Child implements OnInit {
@Output() send: EventEmitter<string>;
public constructor(){}
public ngOnInit() {
send = new EventEmitter<string>();
}
public onEventXYZ() {
this.send.emit('hello');
}
}

在父模板中，我将上述组件引用为

<child (send)="handleSend($event)"></child>

它导致了以下错误：页面加载时出现Cannot read property 'subscribe' of undefined...。后来，在朋友的建议下，我将EventEmitter初始化从ngOnInit移到了构造函数中，一切都很好。

那么，在ngOnInit中初始化组件变量已经太晚了吗？

Answer 1

我相信您正在订阅在父组件中接收到的事件。在模板中使用事件绑定签名((send)="handleSend($event)"(时，不必显式订阅该事件。

尝试以下

parent.com.ponent.html

<child (send)="handleSend($event)"></child>

parent.com组件.ts

handleSend(event: any) {
console.log(event);
// no subscription is needed here
}

至于EventEmitter初始化，可以在定义行中进行。它不会影响代码。

child.component.ts

export class Child implements OnInit {
@Output() send: EventEmitter<string> = new EventEmitter<string>();
public constructor(){}
}

Answer 2

Angular订阅更快

在ngOnInit中初始化不起作用，因为Angular在调用ngOnInit之前订阅了EventEmitter。如果它不存在，它就不能订阅它。

但是内联初始化和构造函数中的初始化是有效的。

一些无关的资源进一步阐述了我的答案：

免责声明：我找不到任何专门针对此主题的直接文档

• 角度变化日志
• Angular生命周期挂钩显示ngOnInit是实例化后第二个执行的方法
• 某种程度上与该主题相关的角度问题
• 我猜Angular在哪里订阅@Output侦听器
• 我想这个过程中涉及的另一个功能
• 关于这个确切主题的讨论链接不一致