javascript - 在多个组件中调用一个组件。 Angular 4

Question

你好，我正在使用 Angular 4。我有一个带有一些 html 的组件，我希望它在各种组件中显示。但是当我将我的模块导入到其他各种模块中时，它说它只能在一个模块中定义......我怎样才能使它工作？

我希望 param-var 显示在全局和简历中。

控制台错误

错误错误:未捕获( promise 中):错误:ParamVarComponent 类型是 2 个模块声明的一部分:GlobalesModule 和 ResumenModule!请考虑将 ParamVarComponent 移至导入 GlobalesModule 和 ResumenModule 的更高模块。您还可以创建一个新的 NgModule，导出并包含 ParamVarComponent，然后在 GlobalesModule 和 ResumenModule 中导入该 NgModule。

参数无功模块

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。现在，您可以根据需要多次将 SharedModule 导入到应用程序的任何其他模块中。由于 ParamVarComponent 已导出，因此只要其他模块导入 SharedModule，您就可以在这些模块内部使用它。

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

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