Question

长时间潜伏......第一次真正打字。

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

的AppModule
AdminModule
XLModule

组件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个模块中的任何一个时，我确实收到一个错误，即2个模块使用了“AppHeader”。

我从哪里开始？我在AppModule中错过了哪些需要导入或导出的内容？而且，应该在其他2个模块中导入什么来使这个“AppHeader”在所有3个模块中都能正常工作，而不会实际制作重复的组件。

我很感激给予任何帮助！

非常感谢！

Answer 1

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

这是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个模块中使用组件

1 个答案: