如何在angular2的子模块组件中使用父模块组件 [英] how to use parent module component in child module component in angular2

问题描述

我有在子模块和父模块中都应该使用的标头，该标头已在父模块中导入和使用，但是当尝试在子组件中导入和使用时显示错误.子模块

I have header that should be used in both child and parent module.that was imported and used in parent module but when try to import and using in child component it showing error.I mean how to use common header for both parent and child module

未捕获(承诺):错误:

Uncaught (in promise): Error:

HeaderComponent类型是 2个模块的声明:AppModule和ProviderModule！请 考虑将HeaderComponent移至要导入的更高模块 AppModule和ProviderModule.

Type HeaderComponent is part of the declarations of 2 modules: AppModule and ProviderModule! Please consider moving HeaderComponent to a higher module that imports AppModule and ProviderModule.

您还可以创建一个新的NgModule来导出并包含 然后HeaderComponent将该NgModule导入AppModule中，然后 ProviderModule.

You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in AppModule and ProviderModule.

推荐答案

您应该使用您要使用的组件创建共享模块，导出这些组件，并将共享模块导入其他模块(您的父级和子级中)情况).

You should create a shared module with the components you want to use, export these components, and import the shared module in your other modules (parent and child for your case).

共享模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent1 } from "./SharedComponent1";
import { SharedComponent2 } from "./SharedComponent2";

@NgModule({
imports: [
    CommonModule
],
declarations: [
    SharedComponent1,
    SharedComponent2
],
exports: [
    SharedComponent1,
    SharedComponent2
]
})
export class SharedModule {}

使用共享模块:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
...
import { SharedModule } from './SharedModule';

@NgModule({
imports: [
    CommonModule,
    ...
    SharedModule
],
declarations: [
    ...
],
providers: [
    ...
]
})
export class AppModule{}

这篇关于如何在angular2的子模块组件中使用父模块组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！