Angular：用于显示树的递归组件

Question

我有代表树形结构的JSON数据（app.component.ts中的data：string）。

现在，我想在表中显示数据。为此，我建立了foo.component.ts。 它打印一个节点，然后回想地继续操作。

一切正常。

是这里： https://stackblitz.com/edit/angular-bqfh7h

但是接下来，我想单击一个节点并标记该节点的每个子节点。标记应更改示例中的字体粗细。

那是行不通的，我不确定为什么。我将标记动作放在中，因为我认为其中包括每个子注释。

不知道我做错了还是递归组件无法做到。

有什么想法可以使它起作用吗？

Answer 1

好的，我对组件的结构做了些微的改动。

每个foo实例现在负责显示其名称（即farm），并且循环已移动，因此现在循环遍历了其子代。这样，有很多孩子的单亲父母。

我还为@Input添加了selected，这使我们可以使用绑定来选择子项。

Here is the working StackBlitz