Angular 2错误:未处理的Promise拒绝:模板解析错误:多个组件:
发布时间:2020-12-17 17:44:16 所属栏目:安全 来源:网络整理
导读:我在几个月前使用旧的beta开发了一个Angular2应用程序到目前为止,我正在将这另一个转移到最新版本(RC5版本),没有任何障碍.直到我收到以下错误: zone.js:484 Unhandled Promise rejection: Template parse errors:More than one component: ProductComponent
我在几个月前使用旧的beta开发了一个Angular2应用程序>到目前为止,我正在将这另一个转移到最新版本(RC5版本),没有任何障碍.直到我收到以下错误:
zone.js:484 Unhandled Promise rejection: Template parse errors: More than one component: ProductComponent,OverlayComponent ("'noscroll': hideBody}"> 我有一个子组件产品组件,它作为app-component的子组件包含在内.我在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 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 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; } } 之前没有问题,我很难过为什么会发生这个错误.谁能指出我正确的方向? 谢谢 解决方法
您需要使ProductComponent的选择器,OverlayComponent更具体,因此它们不会同时应用,或者将应用程序拆分为多个模块,因此您只能注册应该实际应用于当前模块中的模板的声明.
如果您只有一个模块,那么所有指令的所有组件,指令和管道都将应用于所有组件. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |