Angular2 importiert Komponenten in Module

Question

Ich habe eine Ladebildschirm-Komponente, die ich über verschiedene Komponenten in verschiedenen Modulen wiederverwenden möchte.

Ich habe eine AppModule

@NgModule ({ 
    declarations: [ 
    LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
    ReportsModule,DashboardModule 
    ] 

    }); 
export class AppModule { 
} 

Im ReportsModule Ich habe

 @NgModule ({ 
    declarations: [ 
    ReportsComponent 
    ], 
    }); 
export class ReportsModule { 
} 

Im ReportsComponent HTML-Datei

<app-loading-screen></app-loading-screen> 

Wenn es auf diese Weise tun, eine Störung erhalte, dass

'app-loading-screen' is not a known element 

Mehrere andere Komponenten in verschiedenen Modulen müssen ebenfalls die Ladebildschirmkomponente verwenden.

Warum schlägt das noch fehl, ich habe LoadingScreenComponent im Stammmodul enthalten. Oder wie gehe ich vor?

Answer 1

Sie können Loding Bildschirmkomponente als gemeinsam genutzte Modul tun, und Sie Import gemeinsamen Modul beide App-Modul und Berichtsmodul

import { NgModule} from '@angular/core'; 
@NgModule({ 
imports: [ 
], 
declarations: [ 
LoadingScreenComponent 
], 
providers: [ 

], 
exports: [ 
    LoadingScreenComponent 
] 
}) 
export class SharedModule { } 

Dann können Sie gemeinsam genutzte Modul sowohl Modul Armaturenbrett-Modul und Bericht importieren

Answer 2

Fügen Sie bootstrap: [ LoadingScreenComponent ] zu Ihrem NgModule hinzu.

bearbeiten

@NgModule ({ 
    declarations: [ 
    LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
    ReportsComponent,DashboardModule 
    ], 
    bootstrap: [ LoadingScreenComponent ] 

    }); 
export class AppModule { 
} 

auch in Ihrem Index, was dort definiert ist?

Normalerweise würden Sie den Bericht HTML zu Ihrer Hauptkomponente hinzufügen, nicht umgekehrt.

Answer 3

LoadingScreenComponent wird in AppModule deklariert, aber ReportsModule, das in AppModule importiert wird, weiß nichts über LoadingScreenComponent. Sie müssen ein Refactor erstellen, um ein gemeinsames Modul für beide zu erstellen und LoadScreenComponent dort zu importieren.

Answer 4

Bitte fügen Sie den Selektor wie unten gezeigt in Ihre LoadingScreenComponent ein. Der Wähler wird auf die Komponente

import { 
    Component 
} from '@angular/core'; 

@Component({ 
    selector: 'app-loading-screen', 
    templateUrl: 'loading-screen.component.html' 
}) 

export class LoadingScreenComponent {} 

Answer 5

Fügen Sie die LoadingScreenComponent den Export-Array in der AppModule App verwendet werden.Dadurch wird es global zugänglich machen:

@NgModule({ 
    declarations: [ 
     LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
     ReportsModule, 
     DashboardModule 
    ], 
    exports: [ 
     LoadingScreenComponent 
    ] 
}) 
export class AppModule { 
} 

Ansonsten ist der beste Weg, ein gemeinsames Modul zu erstellen und dieses Modul zu jedem anderen Modul importiert werden, wo Sie den LoadingScreenComponent verwenden mögen:

import { NgModule } from '@angular/core'; 
import { LoadingScreenComponent } from '...'; //Path to the LoadingScreenComponent 

@NgModule({ 
    declarations: [ 
     LoadingScreenComponent 
    ],  
    exports: [ 
     LoadingScreenComponent 
    ] 
}) 
export class SharedModule { } 

und Import es mit anderen Modulen wie folgt aus:

import { SharedModule } from '...'; //Path to the SharedModule 

@NgModule({ 
    declarations: [ 
     ReportsComponent 
    ], 
    imports[ 
     SharedModule 
    ] 
}) 
export class ReportsModule { } 

Answer 6

Erstellen Sie einen freigegebenen Modul wie folgt und Import in anderen Modulen.

shared.module.ts

@NgModule({ 
     imports: [ 
      //If needed 
     ], 
     declarations: [ 
      LoadingScreenComponent 
     ], 
     exports:[LoadingScreenComponent] 
}) 
export class SharedModule {} 

In AppModule

@NgModule ({ 
    imports: [ 
    SharedModule 
    ] 
    }); 
export class AppModule {} 

In ReportModule

@NgModule ({ 
    declarations: [ 
    SharedMoudule, 
    ReportsComponent 
    ], 
    }); 
export class ReportsModule {}