Question

我在StackBlitz中有以下项目：

https://stackblitz.com/github/nickhodges/PhillyCCTodoApp/tree/Step20

我收到此错误：

Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.

我已经用尽心尽力了，但似乎找不到解决方法。

此错误是什么意思，我该如何解决？

我应该注意，该错误仅在StackBlitz中发生，而不在本地计算机上发生。

Answer 1

在Angular中，同一元素上不能有两个组件。

该错误指出Angular编译器找到了两个与<mat-form-field元素匹配的组件。

它也指向发生它的模块。

ng：///InputControlsModule/EmailInputComponent.html@1：2

并打印那些冲突的组件：

MatFormField，MatFormField

由于这些组件具有相同的名称，因此只能表示一个：

您以某种方式在InputControlsModule中导入了两个不同的模块，这些模块导出了MatFormField指令。

查看您的模块：

@NgModule({
  imports: [
    ...
    MatFormFieldModule,
    MatInputModule
  ],
  ...
})
export class InputControlsModule {}

我注意到您导入了MatFormFieldModule，还导入了MatInputModule，而导出了MatFormFieldModule（https://github.com/angular/material2/blob/8050f633b56b6c048fc72dad2ab79304afdfad19/src/lib/input/input-module.ts#L29）

但是您可能会认为：我阅读了文档，这不成问题，因为Angular缓存一旦导入了模块：

What if I import the same module twice?

现在，看看如何导入这些模块：

import { ...MatInputModule} from '@angular/material';
                                        |
                                material.umd.js

import { MatFormFieldModule } from '@angular/material/form-field';
                                                  |
                                         material-form-field.umd.js

您可以猜测，由于这些模块来自不同的js文件，因此它们是不同的。

因此，要对其进行修复，您应该从同一捆绑软件中导入它们。

import {
  ...
  MatInputModule,
  MatFormFieldModule 
} from '@angular/material';

但是由于MatInputModule已经导出了MatFormFieldModule，所以您不需要导入它。

Forked Stackblitz

Answer 2

以防万一其他人在测试中遇到这个问题，我让同一组件偶然地在同一测试中模拟了两种不同的方式。两种模拟都有一个选择器。关于冲突的根源，测试失败的输出不清楚。我花了很多时间来寻找解决方法。希望这可以为其他人节省一两个小时：|

为什么我的项目会导致“此元素上匹配了多个组件”。错误？

2 个答案: