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.
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屋！
