你可以在 Angular 的嵌入式视图上订阅事件吗？答案

【问题标题】：Can you subscribe to events on an embedded view in Angular?你可以在 Angular 的嵌入式视图上订阅事件吗？
【发布时间】：2017-12-04 18:03:11
【问题描述】：

我正在尝试使用 EventEmitters 通过一系列嵌套组件向上传递数据/事件。但是我认为我解决一个问题的方法可能会阻止这种情况发生。

我正在其中一个组件上创建一个嵌入式视图，这样它就不会弄乱表格结构。所以对于那个组件，这里有一些相关的代码：

@ContentChild(DataTableAddRecordComponent) adder: DataTableAddRecordComponent;
@ViewChild('dtAdder', { read: ViewContainerRef }) adderContainer: ViewContainerRef;

ngAfterContentInit(): void {
    if (this.adder && this.adderContainer) {
      this.adderContainer.createEmbeddedView(this.adder.templateRef);
    }

  }

这是同一组件的一些 HTML。请注意我试图订阅事件的东西是 ng-container 而不是实际的组件。同样，这样我就不会得到<data-table-adder> 标签搞砸我的桌子。但是，如果该组件不在我的模板中（或者我还缺少其他东西），我如何从该组件中捕获事件？

<table>
<tbody>
<tr><td>Some Junk</td></tr>
<ng-container #dtAdder (added)="onAdd($event)"></ng-container>
</tbody>
</table>

【问题讨论】：

什么是this.adder.templateRef？
如果您更仔细地查看上面的代码，您会发现 adder 只是一个声明为 contentchild 的组件。 TemplateRef 是组件的一个属性 - 对其视图模板的引用 - 用于创建这些嵌入式视图。 angular.io/api/core/TemplateRef

标签： angular eventemitter

【解决方案1】：

结果证明这很简单...您拥有对组件的引用，并且可以通过编程方式订阅发出的事件。

if (this.adder && this.adderContainer) {
  this.adderContainer.createEmbeddedView(this.adder.templateRef);
  this.adder.added.subscribe(data => 
    this.add.emit(data));
}

【讨论】：