在各種組件中調用一個組件。 角度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#{ }