Использовать свойство из привязки вывода в родительском компоненте

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 компонента.