从子组件更新ng-template

Question

我使用ng-template将内容传递给子组件，但我希望从子组件中获取所选项目的特定值

我也有一个子组件，值从子组件发送到子组件，然后再发送到父组件。

虽然我可以获得选定的值，但它为完整的ng-template呈现了相同的值

例如:如果我点击最后一个div，所有选择的值都变成"3“

​

​

你可以有更好的想法在stackblitz下面查看

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

编辑:如何让它呈现特定的选定值？

Answer 1

它正在按预期工作。它呈现相同的值，因为您在模板的每次迭代中呈现{{selected}}，并且selected被设置为从ChildComponent发出的任何最近的值。你期望它呈现什么？

顺便说一句，使用@Input通过多个级别发送数据是一种糟糕的模式，从父级到子级再到子级。这很快就变得难以管理。即使你的代码样本很小，也很难理解。

相反，我建议您使用在父级提供的共享服务

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

然后，您可以在父级和子级中注入该服务，并使用该服务来跟踪状态。