1

我的应用程序包含 3 个模块

  • 应用模块
  • 管理模块
  • XLModule

Component AppHeader（网站的头部）需要在上述3个模块中使用。

目前，它仅在 AppModule 中使用。当我需要在第二个模块 AdminModule 中使“AppHeader”工作时，我真的没有时间真正学习如何在不同模块中使用一个组件，所以我所做的只是复制粘贴“AppHeader”并重命名它到“AdminHeader”，然后将其导入到 AdminModule 以创建所谓的“解决方法”。

那时我还没有真正的“XLModule”。

现在我想在所有 3 个模块中使用“AppHeader”，我真的想摆脱那个复制粘贴的“AdminHeader”。

所以，现在在我的 app.module 中，我已经包含了“AppHeader”

从'./components'导入{AppHeaderComponent}；

const APP_COMPONENTS = [AppHeaderComponent]

在我的 NgModule 我有

@NgModule({
imports: [
BrowserModule,
CommonModule,
.... bunch of imports here nothing related to AppHeader and 2 other modules of the applications are also not imported

在我的声明中：

...APP_COMPONENTS

在我的出口中：

APP_COMPONENTS

每当我尝试将“AppHeader”导入到其他 2 个模块中的任何一个时，都会收到“AppHeader”被 2 个模块使用的错误。

我从这里去哪里？我在需要导入或导出的 AppModule 中遗漏了什么？而且，还应该在其他 2 个模块中导入什么，以使这个“AppHeader”在所有 3 个模块中工作，而无需实际制作重复的组件。

4

1 回答 1

1

我在我的项目中为这样的组件所做的是，我创建一个 SharedModule（或您想要的任何名称）并将我想在多个地方使用的任何组件添加到此模块，然后您可以在您的任何模块中导入此模块想使用那个组件。

这是共享模块：

import {NgModule} from '@angular/core';
import {HeaderComponent} from "./header.component/header.component";
@NgModule({
imports: [
    CommonModule,
],
declarations: [
    HeaderComponent,

],
exports: [
    HeaderComponent,
],
providers: [

]
})
export class SharedModule {
}

这将是我想在其中使用组件的模块：

import {NgModule} from '@angular/core';
import {SharedModule} from '../_shared.module/shared.module';

@NgModule({
imports: [
    SharedModule,

],
declarations: [

],
providers: [

]
})
export class ModuleIWantToUseComponentIn {
}
于 2018-04-15T08:13:29.113 回答