如何在 3 个模块中使用组件
How do I use Component in 3 Modules
我的应用程序包含 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 个模块中工作,而无需实际制作重复组件。
我在我的项目中为这样的组件所做的是,我创建了一个 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 个模块
- 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 个模块中工作,而无需实际制作重复组件。
我在我的项目中为这样的组件所做的是,我创建了一个 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 {
}