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

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>

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

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