angular项目,把A组件导出以后,在B中直接通过标签的方式引用了A组件,类似于下面这样:

<div>
   <demo1></demo1>
</div>

然后打开B组件所在的页面,开始报下面的错误:

ERROR Error: Uncaught (in promise): 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: AxxxxComponent,BxxxxxComponent ….

上面这个报错的大概意思是你在引用其他组件过程中,发现两个冲突的组件,我们打开BxxxxxComponent,找到selector部分,发现下面这样的代码:

@Component({
  selector: 'list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.less']
})

然后全局搜索这个selector,果然又发现一个名叫 list的select。

我前面在 https://www.longkui.site/program/frontend/angular-component/4564/ 这篇文章中说过,不要把所有的组件都起一样的名字,这样在引用的时候就可能会报错。

修改其中一个的selector名字,比如改成list2,然后保存重新调用,问题解决。

分类: 前端