Angular2事件发射器没有得到处理

Posted 2023-02-23

【中文标题】Angular2事件发射器没有得到处理

【英文标题】：Angular2 event emitter doesn't get handled

【发布时间】：2017-12-05 11:50:58

【问题描述】：

我想要一个通用列表组件，将注入一个“获取”方法。这不能通过“@input”工作，所以我尝试了输出，但由于某种原因它也不起作用。我该怎么做？为什么这不起作用？

父组件

html

<app-list (requestFetch)="fetch($event)"></app-list>  

TypeScript

fetch(stuff)         
    console.log('fetching'); //this doesn't get called...
    this.dataservice.get().subscribe(data=>
    console.log('fetched');
    stuff(data);
    );
     

列表组件

@Output()
requestedFetch:EventEmitter<Function> = new EventEmitter<Function>  );                

constructor()
            
   console.log('requesting data');
   this.requestedFetch.emit(this.setData);


setData(data) 
   console.log('found data');
  //do stuff with the fetched Data

EDIT 将 onRequestedFetch 更改为 requestedFetch 并添加了 cmets。还是不行:(

【参考方案1】：

执行

this.requestedFetch.emit(this.setData);

在OnInit而不是构造函数中：

ngOnInit() 
  this.requestedFetch.emit(this.setData);

查看Difference between Constructor and ngOnInit

当我们在 OnInit 中调用它时，我们确信 Angular 已经完成了组件的创建，并且我们拥有了我们需要的一切。

DEMO

【讨论】：

太好了，很高兴听到它成功了！由于它解决了您的问题，您可以考虑通过单击此答案投票下的灰色勾号将答案标记为已接受，这将问题标记为已解决:) 但此外还有美好的一天和愉快的编码！ :) :)

【参考方案2】：

您将requestedFetch 作为您的输出变量并在您的HTML 中使用onRequestFetch。

修改为

<app-list (requestedFetch)="fetch($event)"></app-list>  

【讨论】：

这显然是我的一个错误，虽然我得说..它并没有解决我的问题:(