Обновление ng-шаблона из дочернего компонента

Question

Я использую ng-шаблон для передачи содержимого в дочерний компонент, но я хочу получить конкретное значение выбранного элемента из дочернего компонента

У меня также есть большой дочерний компонент, значение которого выводится изот компонента Grand Child к компоненту Child, а затем к компоненту Parent.

Хотя я могу получить выбранное значение, но он отображает то же значение для полного ng-шаблона

Например: если я нажимаю напоследний div, все выбранные значения становятся "3"

Вы можете иметь гораздо лучшую идею, проверяя ниже stackblitz

https://stackblitz.com/edit/angular-rfvkoj

РЕДАКТИРОВАТЬ: как я могу отобразить определенные выбранные значения?

Answer 1

Работает как задумано. Он отображает одно и то же значение, потому что вы визуализируете {{selected}} на каждой итерации шаблона, а для selected устанавливается любое последнее значение, полученное из ChildComponent. Что вы ожидали, что он будет отображаться?

Кроме того, это плохой шаблон, чтобы использовать @Input для отправки данных через несколько уровней, от родителя к ребенку к внуку. Это быстро становится сложным в управлении. Даже ваш очень маленький пример кода уже сложен для отслеживания.

Вместо этого я предлагаю вам использовать общую службу, предоставляемую на родительском уровне

@Component({
  ...
  providers: [MyService]
})
export class ParentComponent {
  ...
}

Затем вы можете внедрить эту службу в родительскую. и внучка, и использовать сервис для отслеживания состояния.