在各种组件中调用一个组件。 角度4

Question

您好，我使用Angular4。我有一个带有一些html的组件，希望将其显示在各个组件中。 但是，当我将我的模块导入其他各种模块时，它说只能在一个模块中定义...我如何使它工作？

我希望param-var在全局变量中显示并恢复。

控制台错误

错误错误：未捕获（承诺）：错误：类型ParamVarComponent是以下两个模块的声明的一部分：GlobalesModule和ResumenModule！ 请考虑将ParamVarComponent移至导入GlobalesModule和ResumenModule的更高模块。 您还可以创建一个新的NgModule，该导出并包含ParamVarComponent，然后在GlobalesModule和ResumenModule中导入该NgModule。

参数VAR模块

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


import { ParamVarRoutingModule } from './param-var-routing.module';
import { ParamVarComponent } from './param-var.component';

import { FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    ParamVarRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [ParamVarComponent,

  ]
})
export class ParamVarModule { }

全球模块

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


import { GlobalesRoutingModule } from './globales-routing.module';
import { GlobalesComponent } from './globales.component';

import {ParamVarComponent} from '../param-var/param-var.component';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    GlobalesRoutingModule,
    FormsModule,
    ReactiveFormsModule,

  ],
  declarations: [GlobalesComponent,ParamVarComponent,


  ]
})
export class GlobalesModule { }

简历模块

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


import { ResumenRoutingModule } from './resumen-routing.module';
import { ResumenComponent } from './resumen.component';

import { FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ParamVarComponent} from '../param-var/param-var.component';

@NgModule({
  imports: [
    CommonModule,
    ResumenRoutingModule,
    FormsModule,
    ReactiveFormsModule,

  ],
  declarations: [ResumenComponent,ParamVarComponent,


  ]
})
export class ResumenModule { }

Answer 1

创建新的SharedModule （或任何其他名称，但要与Angular的样式指南匹配）。 在ParamVarComponent声明并导出您的ParamVarComponent 。 现在，您可以根据需要多次在应用程序的任何其他模块中导入SharedModule 。 由于已导出ParamVarComponent ，因此只要这些模块导入SharedModule ，便可以在其他模块中使用它。

@NgModule({
     imports: [
         CommonModule,
         FormsModule,
         ReactiveFormsModule
    ],
    declarations: [ParamVarComponent],
    exports: [ParamVarComponent]
})
export class SharedModule { }

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        SharedModule 
    ]
})
export class OtherModule#{ }