Angular 4递归渲染列表报错：同一元素匹配多个组件

这个错误的核心原因是有两个不同的组件类（TreeNodeComponent和TreeNode）都使用了tree-node作为选择器，当Angular解析<tree-node>标签时，无法确定应该渲染哪一个组件。

为什么会出现这个情况？ #

从你的错误信息和代码来看，大概率是下面两种场景之一：

• 你之前通过Angular CLI生成过tree-node组件（比如ng g c tree-node），自动创建了TreeNodeComponent类，它的选择器默认就是tree-node，而你又手动定义了一个TreeNode组件，同样用了tree-node作为选择器，并且这两个组件都被添加到了app.module.ts的declarations数组中。
• 你引入了某个第三方UI库，其中包含了一个TreeNodeComponent，它的选择器也是tree-node，并且该组件被导入到了你的模块中。

解决步骤 #

1. 检查并清理重复的组件声明
   打开app.module.ts，查看declarations数组，确认是否同时存在TreeNode和TreeNodeComponent。如果是，删除其中一个你不需要的组件（建议保留你手动写的那个，同时删除自动生成的TreeNodeComponent相关文件）。

2. 修改组件选择器避免冲突
   如果不想删除任何组件，可以修改其中一个组件的选择器。比如把你手动定义的TreeNode组件的选择器改成独一无二的名称：

   @Component({
     selector: 'app-tree-node', // 修改为唯一选择器
     template: `
       <div>{{node.name}}</div>
       <ul>
         <li *ngFor="let childNode of node.children">
           <app-tree-node [node]="childNode"></app-tree-node>
         </li>
       </ul>
     `
   })
   export class TreeNode {
     @Input() node: AdminCategory; // 顺便修正类型：单个节点而非数组
   }
   

   同时记得把TreeView组件模板里的<tree-node>改成<app-tree-node>。

额外的逻辑修正提醒 #

你当前的代码还有一个潜在问题：TreeNode组件的@Input() node类型是AdminCategory[]，但递归时传入的是单个AdminCategory对象（node.children里的元素），这会导致类型不匹配。建议把@Input() node的类型改成AdminCategory，然后在TreeView组件里遍历categories数组，逐个渲染节点：

@Component({
  selector: 'categories',
  template: `
    <ul>
      <li *ngFor="let category of categories">
        <app-tree-node [node]="category"></app-tree-node>
      </li>
    </ul>
  `,
})
export class TreeView {
  categories: AdminCategory[];
  // ... 其他代码
}

内容的提问来源于stack exchange，提问作者minizibi