加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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更具体,因此它们不会同时应用,或者将应用程序拆分为多个模块,因此您只能注册应该实际应用于当前模块中的模板的声明.

如果您只有一个模块,那么所有指令的所有组件,指令和管道都将应用于所有组件.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读