Ich habe Angular 2.0.0 App mit Angular-Cli generiert.
Wenn ich eine Komponente erstelle und hinzufüge AppModule
Deklarationsarray ist alles in Ordnung, es funktioniert.
Ich habe mich entschieden, die Komponenten zu trennen, also habe ich eine TaskModule
und eine Komponente erstellt TaskCard
. Jetzt möchte ich die TaskCard
in einer der Komponenten der AppModule
(der Board
Komponente) verwenden.
AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { BoardComponent } from './board/board.component';
import { LoginComponent } from './login/login.component';
import { MdButtonModule } from '@angular2-material/button';
import { MdInputModule } from '@angular2-material/input';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { routing, appRoutingProviders} from './app.routing';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { UserService } from './services/user/user.service';
import { TaskModule } from './task/task.module';
@NgModule({
declarations: [
AppComponent,
BoardComponent,// I want to use TaskCard in this component
LoginComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MdButtonModule,
MdInputModule,
MdToolbarModule,
routing,
TaskModule // TaskCard is in this module
],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }
TaskModule:
import { NgModule } from '@angular/core';
import { TaskCardComponent } from './task-card/task-card.component';
import { MdCardModule } from '@angular2-material/card';
@NgModule({
declarations: [TaskCardComponent],
imports: [MdCardModule],
providers: []
})
export class TaskModule{}
Das gesamte Projekt ist unter https://github.com/evgdim/angular2 verfügbar (Kanban-Board-Ordner)
Was vermisse ich? Was habe ich zu verwenden zu tun , TaskCardComponent
in BoardComponent
?
quelle
Sie müssen
export
es von IhremNgModule
:quelle
(Winkel 2 - Winkel 7)
Die Komponente kann nur in einem einzelnen Modul deklariert werden. Um eine Komponente aus einem anderen Modul zu verwenden, müssen Sie zwei einfache Aufgaben ausführen:
1. Modul:
Haben Sie eine Komponente (nennen wir sie "ImportantCopmonent"), die wir auf der Seite des 2. Moduls wiederverwenden möchten.
2. Modul:
Verwendet das "ImportantCopmonent" erneut, indem das FirstPageModule importiert wird
quelle
Beachten Sie, dass Sie zum Erstellen eines sogenannten "Feature-Moduls" darin importieren müssen
CommonModule
. Ihr Modulinitialisierungscode sieht also folgendermaßen aus:Weitere Informationen finden Sie hier: https://angular.io/guide/ngmodule#create-the-feature-module
quelle
Was auch immer Sie von einem anderen Modul verwenden möchten, fügen Sie es einfach in das Export-Array ein . So was-
quelle
Ein großer und großartiger Ansatz besteht darin, das Modul von einem zu laden.
NgModuleFactory
Sie können ein Modul in ein anderes Modul laden, indem Sie Folgendes aufrufen:Ich habe das von hier bekommen .
quelle
Gelöst, wie eine Komponente verwendet werden soll, die in einem Modul in einem anderen Modul angegeben ist.
Basierend auf der Erklärung von Royi Namir (Vielen Dank). Es fehlt ein Teil, um eine in einem Modul deklarierte Komponente in einem anderen Modul wiederzuverwenden, während das verzögerte Laden verwendet wird.
1. Exportieren Sie die Komponente in das Modul, das sie enthält:
2. In dem Modul, in dem Sie TaskCardComponent verwenden möchten:
Auf diese Weise importiert das zweite Modul das erste Modul, das die Komponente importiert und exportiert.
Wenn wir das Modul im zweiten Modul importieren, müssen wir es erneut exportieren. Jetzt können wir die erste Komponente im zweiten Modul verwenden.
quelle