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,然后保存重新调用,问题解决。