在父组件

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属性。