输出事件发射器仅在 ngOnInit 上触发

Posted 2023-02-23

【中文标题】输出事件发射器仅在 ngOnInit 上触发

【英文标题】：Output Event Emitter triggers only on ngOnInit

【发布时间】：2017-11-07 01:15:20

【问题描述】：

我有父子组件，从子组件需要触发父组件功能。

Parent.component.ts

loadData(event) 
      console.log(event);

Parent.component.html

<app-project (uploaded)="loadData($event)" ></app-project>

child.component.ts

@Output() uploaded:EventEmitter<any> = new EventEmitter();

ngOnInit() 
    this.uploaded.emit('complete'); // Worked 


loadProject()
    this.uploaded.emit('complete'); // Not triggering the parent function 

child.component.html

<button type="button" (click)="loadProject(project)" label="Load Project"></button>

不知道这有什么问题，但从 ngOnInit 开始工作。

从 child.component.html 调用 loadProject。

【问题讨论】：

从哪里调用loadProject()？

child.component.ts 中有一个函数 (editProject) 从那里调用 editProject(project: Project) this.uploaded.emit('complete');

也许编辑您的问题是一个更好的主意，因为 cmets 中的代码很难阅读。还请添加调用editProject() 的信息。

我确信someMethod($event) 在这两种情况下都会被调用。 someMethod() ... 长什么样子？

那么问题或疑问是什么？

【参考方案1】：

改变：

child.component.ts

@Output() uploaded = new EventEmitter<string>();

ngOnInit() 
    this.uploaded.emit('complete'); // Worked 


loadProject()
    this.uploaded.emit('complete'); // Not triggering the parent function 

child.component.html

<button type="button" (click)="loadProject()" label="Load Project"></button>

您将字符串值传递给 loadProject，但在子组件中没有定义带有 1 个参数的 loadproject