Angular 2错误:未处理的承诺拒绝:模板解析错误:多个组件: [英] Angular 2 error: Unhandled Promise rejection: Template parse errors: More than one component:
问题描述
几个月前，我使用旧的Beta开发了一个Angular2应用程序>目前，我正在将其迁移到迄今为止最新的(RC5版本)的最新版本中.直到我收到以下错误:
I developed a an Angular2 application using the old beta a few months back> I am currently moving this other to a fresh build of the newest (RC5 version) so far with no hitches. That was until I have been getting the following error:
zone.js:484 Unhandled Promise rejection: Template parse errors:
More than one component: ProductComponent,OverlayComponent ("'noscroll': hideBody}">
我有一个子组件product-component，它被包含为app-component的子组件.我将两者都包含在app.module.ts文件中.
I have a sub-component product-component which is included as a sub-component of app-component. I include both of these in the app.module.ts fle.
我不确定此错误的含义，并且尚无在线支持.以下是相关文件:
I am not sure what this error means and can find no support for this yet online. Here are the relevant files:
app.module.ts
app.module.ts
import './rxjs-extensions';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ProductComponent } from './components/product.component';
import { OverlayComponent } from './components/overlay-component';
import { ProductService } from './services/product.service';
import { CategoryService } from './services/category.service';
import { Breadcrumb} from "./directives/breadcrumb";
import { CategoryTree } from "./directives/category-tree";
import { Files } from "./directives/files";
import { Gallery } from "./directives/gallery";
import { OrderInformation } from "./directives/order-information";
@NgModule({
imports: [
BrowserModule,
HttpModule
],
declarations: [
AppComponent,
ProductComponent,
OverlayComponent,
Breadcrumb,
CategoryTree,
Files,
Gallery,
OrderInformation
],
providers: [
ProductService,
CategoryService
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
app.component.ts
import { Component } from '@angular/core';
import { Product } from "./classes/Product";
import { ProductService } from "./services/product.service";
import { Category } from "./classes/Category";
import { CategoryService } from "./services/category.service";
@Component({
selector: 'product-display',
templateUrl: './app/views/main-view.html'
})
export class AppComponent {
title = `St. David's Poultry Supplies`;
menuLoaded = false;
hideBody = false;
productsLoaded = false;
categories = [];
selectedCategory = null;
selectedProduct = Product;
breadcrumbCategories = [];
products = [];
APIError = [];
constructor(
private _productService: ProductService,
private _categoryService: CategoryService
) {
}
getProducts(categoryId = 0) {
var payload = {
order : 'asc',
order_by : 'title',
category_id : categoryId,
resize : true,
imgHeight : 200,
imgWidth : 200
};
this._productService.getProducts(payload)
.subscribe(
products => {this.products = products},
error => {this.APIError = error},
() => {this.productsLoaded = true}
);
}
getCategories() {
this.productsLoaded = false;
this._categoryService.getCategories({
order : 'asc',
order_by : 'name',
parent_id : 0,
//sub_cats : true,
//group_by_parent : true
})
.subscribe(
categories => {this.categories = categories},
error => {this.APIError = error},
() => {
this.menuLoaded = true,
this.productsLoaded = true
}
);
}
selectCategory(category: Category) {
this.selectedCategory = category;
this.breadcrumbCategories.push(category);
}
resetFilters() {
this.getProducts();
this.getCategories();
this.selectedCategory = null;
this.selectedProduct = null;
}
private changeCategory(category: Category):void {
this.productsLoaded = false;
this.selectCategory(category);
this.getProducts(category.id);
}
ngOnInit() {
this.getCategories();
this.getProducts();
}
}
product.component.ts
product.component.ts
import { Component, Input } from '@angular/core';
import { Product } from "../classes/Product";
import { Category } from "../classes/Category";
import { ProductService } from "../services/product.service";
@Component({
selector: 'product-view',
templateUrl: './app/views/product-view.html'
})
export class ProductComponent {
@Input() products: Product[];
@Input() selectedCategory: Category;
selectedProduct: Product;
contentLoaded = false;
title = "product viewer";
APIError = [];
constructor(
private _productService: ProductService
) {
_productService.emitter.subscribe(
product => {
this.selectedProduct = product;
this.contentLoaded = true
}
);
}
selectProduct(product) {
this.selectedProduct = product;
this._productService.emitProduct(this.selectedProduct);
}
ngAfterContentInit() {
this.contentLoaded = true;
}
private changeSelectedProduct(product, callback) {
this.selectedProduct = product;
}
}
以前没有任何问题，我很困惑为什么会发生此错误.谁能指出我正确的方向?
There was no problem with this before and I am stumped as to why this error is occurring. Can anyone point me in the right direction?
谢谢
推荐答案
您需要使ProductComponent，OverlayComponent的选择器更加具体，以使它们不都适用，或者将您的应用程序分成几个模块因此您只注册了declarations，该declarations实际上应该应用于当前模块中的模板.
You either need to make the selectors of ProductComponent, OverlayComponent more specific so they don't both apply, or to split your application into several modules so you only have the declarations registered that should actually be applied to the templates in the current module.
如果只有一个模块，则所有directives的所有组件，指令和管道都将应用于所有组件.
If you only have one module, then all components, directives, and pipes of all directives are applied to all components.
这篇关于Angular 2错误:未处理的承诺拒绝:模板解析错误:多个组件:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
