Здравствуйте, я пытаюсь рекурсивно отобразить список, я получаю следующую ошибку:
Uncaught Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: TreeNodeComponent,TreeNode ("
[ERROR ->]<tree-node [node] = "categories"></tree-node>
"): ng:///AppModule/TreeView.html@1:4
Вот как выглядят эти компоненты:
@Component({
selector: 'tree-node',
template: `
<div>{{node.name}}</div>
<ul>
<li *ngFor = "let node of node.children">
<tree-node [node] = "node"></tree-node>
</li>
</ul>
`
})
export class TreeNode {
@Input() node: AdminCategory[];
}
@Component({
selector: 'categories',
template: `
<tree-node [node] = "categories"></tree-node>
`,
})
export class TreeView {
categories: AdminCategory[];
constructor(private store: Store<AppState>, private dialog: MatDialog) {
store.select('categoryState').subscribe(s => this.categories = s);
}
addCategory(category: AdminCategory) {
this.store.dispatch(new AddCategory(new AdminCategory((category.id + 1), 'qwe', category.id)));
}
....
Я также добавил их в объявления в app.module.ts. Что здесь не так? Я не получаю это сообщение об ошибке, потому что я не объявил два одинаковых компонента: первый - tree-node, а второй - categories.
Скорее всего, не получится. Вы не можете выполнять рекурсию в шаблоне. (Я не уверен на 100%)
@RitwickDey, это то, о чем я подумал сначала, затем я нашел stackoverflow.com/questions/37746516/… (на самом деле, сильно связанный с вопросом)
Да, я последовал этому связанному примеру. Вот stackblitz stackblitz.com/edit/angular-msgywe. В любом случае, есть еще одна ошибка, может быть, вы, ребята, не могли бы предложить другой способ сделать это? Я просто хочу отобразить неограниченный вложенный список, когда я нажимаю на элемент, он должен добавлять новый элемент в качестве дочернего элемента, по которому щелкнули





что вы имеете в виду, говоря "Я также добавил их в объявления в app.module.ts"? Эти компоненты объявлены дважды в вашем коде?