如何在 3 个模块中使用组件

Question

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

AppModule
管理模块
XL模块

上述3个模块需要用到组件AppHeader(网站header)

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

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

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

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

import { AppHeaderComponent} from './components';

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 个模块中工作，而无需实际制作重复组件。

Answer 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 {
}

如何在 3 个模块中使用组件

How do I use Component in 3 Modules

angular5

angular-components

angular-module

core-ui