使用父组件中输出绑定中的属性

Question

我确定我在这里一定缺少一些简单的东西，但我有一个子组件，它通过 Output 事件发出一个对象。 然后，父组件在模板中订阅此输出，如下所示：

<div class="tree-panel-container">
    <div class="tree-panel-content">
        <content-tree (contextSelected)="contextPanelSelected($event);"></content-tree>
    </div>
    <context-panel>
        <div class="context-panel">
            <h2>{{contextTitle}}</h2>
        </div>
    </context-panel>
</div>

在同一组件的导出类中，有一个如下函数：

contextPanelSelected($event) {
    console.log($event);
}

此函数中的console.log是正确的，因此我知道输出对象按预期通过。 我想做的是在此输出对象上使用属性来填充模板中的{{contextTitle}}值。

谁能建议如何做到这一点？

非常感谢。

Answer 1

您可以使用以下内容：

contextPanelSelected(value) {
  console.log(value);
  this.contextTitle = value;
}

在下面的代码中：

(contextSelected)="contextPanelSelected($event)"

$event对应于通过事件contextSelected.emit('some text')发送的数据。此值可以作为 contextPanelSelected 方法的参数传递。然后，此方法负责将此参数设置到组件的 contextTitle 属性中。