ngOnInit 在 Angular 的组件内初始化 EventEmitter 变量是不是为时已晚？

Posted 2023-03-13

【中文标题】ngOnInit 在 Angular 的组件内初始化 EventEmitter 变量是不是为时已晚？

【英文标题】：Is ngOnInit too late to initialise an EventEmitter var inside a component in Angular?ngOnInit 在 Angular 的组件内初始化 EventEmitter 变量是否为时已晚？

【发布时间】：2020-11-05 03:00:08

【问题描述】：

我尝试了以下子组件类

@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 中初始化组件变量是否为时已晚？

【参考方案1】：

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

试试下面的

parent.component.html

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

parent.component.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()

【讨论】：

Michael D，我知道它也适用于内联定义，但我想知道，为什么在 ngOnInit 中初始化 EventEmitter 类型 var 为时已晚？

@oomer：这取决于您何时在send 变量上调用emit。 ngOnChanges 挂钩在 ngOnInit 之前触发。因此，如果您要在ngOnChanges 中发出某些内容，您将得到未定义的错误。像我展示的那样在定义中初始化它没有错。