如何查找哪些组件存在冲突? [英] How to find which components are conflicting?

问题描述

我正在使用Angular 2的ES5版本. 而且我遇到了这个错误:

I'm using ES5 flavor of Angular 2. And I've encountered this error:

Unhandled Promise rejection: 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: class2,class6 ("
    </tbody>
</table>
[ERROR ->]<paging [data]="data" (changed)="loadCountries($event)" unit="country"></paging>
<md-spinner class="lis"): class18@30:0 ; Zone: <root> ; Task: Promise.then ; Value: 

它表示class2和class6.我找不到这些类的原始名称.

It says class2 and class6. I can't find out the original names of the classes.

这是我的模块定义:

var module = ng.core.NgModule({
    imports: [
        ng.platformBrowser.BrowserModule, 
        ng.router.RouterModule.forRoot([].concat([...])), 
        ng.material.MaterialModule, 
        ng.http.HttpModule, 
        ng.common.CommonModule, 
        ng.forms.FormsModule],
    declarations: [
        app.CoalAddWorldCoalSupply, 
        app.FilterValuesDialog, 
        app.CoalFlows, 
        app.ImportWorldCoalSupplies, 
        app.CoalProducts, 
        app.CoalReports, 
        app.CoalUpsertFlow, 
        app.CoalUpsertProduct, 
        app.CoalWorldCoalSupplies, 
        app.CountryList, 
        app.CountryUpsert, 
        app.Dashboard, 
        app.ElectricityHeatGenerations, 
        ...
        ],
    entryComponents: [app.FilterValuesDialog, confirmDialog],
    bootstrap: [app.Layout],
    providers: [globalService]
})
.Class({
    constructor: function () { }
});

document.addEventListener('DOMContentLoaded', function () {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(module);
});

用...指定的零件意味着更多相同的东西.

Parts specified with ... means more of the same things.

如何理解zone.js所指的是哪个类?

How to understand which class zone.js is referring to?

推荐答案

假设我们有以下应用程序:

Let's say we have the following app:

app.component.js

app.AppComponent = Component({
  selector: 'my-app',
  template:
    '<h1>(es5) angular2 4.1.3</h1><comp1></comp1>'
})
.Class({
  constructor: function AppComponent() {}
});

component1.js

app.Component1 = Component({
  selector: 'comp1',
  template:
    'component1'
})
.Class({
  constructor: function Component1() {}
});

component2.js

app.Component2 = Component({
  selector: 'comp1',
  template:
    'component2'
})
.Class({
  constructor: function Component2() {}
});

https://plnkr.co/edit/AKBVbX9ruZM8DchFcfbh?p=preview

所以我的动作:

这篇关于如何查找哪些组件存在冲突?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！