Question

如果我包含两个模块，它们都使用相同的选择器定义组件或指令（比如a[routerLink]）。

ModuleA使用选择器a[routerLink]

定义指令

ModuleB使用选择器a[routerLink]

定义指令

AppModule包含两个模块，并在其模板中使用<a routerLink="..."></a>。

然后使用哪个指令？ Angular如何解决在运行时选择哪个组件/指令？行为是否记录在某处？

Answer 1

您应该收到此错误消息

More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: ${componentTypeNames.join(',')}

来自https://github.com/angular/angular/blob/c8a1a14b87e5907458e8e87021e47f9796cb3257/packages/compiler/src/template_parser/template_parser.ts#L663-L665

您需要确保将组件声明或导入到单个NgModule中不会发生冲突。

如果未在同一模块中导入或声明冲突的组件，则不会发生冲突。

另见https://github.com/angular/angular/issues/10552#issuecomment-242998180

Answer 2

如果在两个单独的模块中声明了具有相同选择器的组件，Angular模板解析器将在整个应用程序树中查找最接近的组件。在这里，您可以看到工作示例（只需单击在descriptor.proto内声明的第二个'hello'组件的链接： StackBlitz - example of two components with same selector

Angular以哪种方式解决重复指令/组件选择器？

2 个答案: