typescript - Komponent är en del av deklarationerna av 2 moduler i Angular

Jag har skapat en komponent som heter commonmod.component.ts som jag inkluderar i två andra moduler (abc och def).

abc.module.ts

import { commonmod } from '../commonmod/commonmod.component';
@NgModule({
  declarations: [
    commonmod
  ]
})

def.modul.ts

import { commonmod } from '../commonmod/commonmod.component';
@NgModule({
  declarations: [
    commonmod
  ]
})

När jag omdirigerar en sida i abc-modulen till en annan sida i def-modulen får jag följande felmeddelande.

FEL Fel: Obehandlat (i löfte): Fel: Typen commonmod är en del av deklarationerna för 2 moduler: abc och def! Överväg att flytta commonmod till en högre modul som importerar abc och def. Du kan också skapa en ny NgModule som exporterar och inkluderar commonmod och sedan importera den NgModule i abc och def. Fel: Typen commonmod är en del av deklarationerna för 2 moduler: abc och def! Överväg att flytta commonmod till en högre modul som importerar abc och def. Du kan också skapa en ny NgModule som exporterar och inkluderar commonmod och sedan importera den NgModule i abc och def.

Svar #1

En komponent kan deklareras i en och endast en modul. Om du försöker deklarera den i fler än en modul får du detta fel

Fel: Typ ... är en del av deklarationerna av 2 (eller fler) moduler:

Lösningen på detta problem är ganska enkel. Om du behöver använda en komponent i mer än en modul, lägg då till den i modulens exports-array som deklarerade den.

Så låt oss säga att vi har en komponent som heter GreetingsComponent som är deklarerad i en modul TestModule och jag vill använda den i AppComponent som är deklarerad i AppModule. Jag lägger helt enkelt till den i exports-arrayen i TestModule på detta sätt

import {NgModule} from '@angular/core';
import {GreetingComponent} from './greeting.component';
@NgModule({
declarations:[GreetingComponent],
exports:[GreetingComponent]
})
export class TestModule
{
}

Nu när AppModule har importerat TestModule kommer alla konstruktioner, vare sig Components, Directive, Pipes etc som finns i exports-arrayen av TestModule automatiskt att vara tillgängliga för AppModule.

AppModule.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {TestModule} from './test.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule, TestModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Nu kan du helt enkelt använda GreetingsComponent i AppComponent

  <greetings></greetings>

En fungerande StackBlitz här.

Skål.

Svar #2

Du kan inte deklarera en komponent i mer än en modul. Om båda modulerna behöver den, måste du deklarera/exportera din komponent i en tredje modul och importera denna modul i abc och def.

@NgModule({
  imports:      [ MainModule ]
})
export class AbcModule { }

@NgModule({
  imports:      [ MainModule ]
})
export class DefModule { }

@NgModule({
  declarations: [ CommonMod ],
  exports:    [ CommonMod ]
})
export class MainModule { }

Relaterade artiklar