Angolare 2 Utilizzare il componente da un altro modulo

Ho l’applicazione Angular 2 (versione 2.0.0 – finale) generata con angular-cli.

Quando creo un componente e lo aggiungo AppModule di dichiarazioni di AppModule va tutto bene, funziona.

Ho deciso di separare i componenti, quindi ho creato un TaskModule e una componente TaskCard . Ora voglio usare la TaskCard in uno dei componenti AppModule (il componente Board ).

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{} 

L’intero progetto è disponibile su https://github.com/evgdim/angular2 (cartella kanban-board)

Cosa mi manca? Cosa devo fare per utilizzare TaskCardComponent in BoardComponent ?

La regola principale qui è che:

I selettori applicabili durante la compilazione di un modello di componente sono determinati dal modulo che dichiara tale componente e dalla chiusura transitiva delle esportazioni delle importazioni di quel modulo.

Quindi, prova ad esportarlo:

 @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] <== this line }) export class TaskModule{} 

Cosa dovrei esportare?

Esportare le classi dichiarabili che i componenti in altri moduli dovrebbero essere in grado di fare riferimento nei loro modelli. Queste sono le tue classi pubbliche. Se non esporti una class, rimane privata, visibile solo agli altri componenti dichiarati in questo modulo.

Nel momento in cui crei un nuovo modulo, pigro o meno, qualsiasi nuovo modulo e dichiari qualcosa in esso, quel nuovo modulo ha uno stato pulito (come diceva Ward Bell in https://devchat.tv/adv-in-angular/119 -aia-evitare-comune-insidie-in-angular2 )

Angolare crea un modulo transitivo per ciascuno dei @NgModule .

Questo modulo raccoglie le direttive importate da un altro modulo (se il modulo transitivo del modulo importato ha esportato le direttive) o dichiarato nel modulo corrente .

Quando il modello di compilazione angular appartiene al modulo X , vengono utilizzate quelle direttive che erano state raccolte in X.transitiveModule.directives .

 compiledTemplate = new CompiledTemplate( false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives); 

https://github.com/angular/angular/blob/4.2.x/packages/compiler/src/jit/compiler.ts#L250-L251

inserisci la descrizione dell'immagine qui

In questo modo secondo l'immagine qui sopra

  • YComponent non può utilizzare ZComponent nel suo modello perché l'array di directives del Transitive module Y non contiene ZComponent perché YModule non ha importato ZModule cui modulo transitivo contiene ZComponent nella matrice ZComponent .

  • All'interno del template XComponent possiamo usare ZComponent perché il Transitive module X ha una matrice di direttive che contiene ZComponent perché il modulo di importazione YModule ( YModule ) che esporta il modulo ( ZModule ) che esporta la direttiva ZComponent

  • All'interno del modello AppComponent non è ansible utilizzare XComponent perché AppModule importa XModule ma XModule non esporta XComponent .

Guarda anche

  • perché il modulo lazy loaded deve importare commonModule? Angolare 2

  • Domande frequenti sul modulo angular

  • Qual è la differenza tra dichiarazioni, fornitori e importazione in NgModule

Devi export dal tuo NgModule :

 @NgModule({ declarations: [TaskCardComponent], exports: [TaskCardComponent], imports: [MdCardModule], providers: [] }) export class TaskModule{} 

Si noti che per creare un cosiddetto “modulo funzione”, è necessario importare CommonModule al suo interno. Quindi, il codice di inizializzazione del modulo sarà simile a questo:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TaskCardComponent } from './task-card/task-card.component'; import { MdCardModule } from '@angular2-material/card'; @NgModule({ imports: [ CommonModule, MdCardModule ], declarations: [ TaskCardComponent ], exports: [ TaskCardComponent ] }) export class TaskModule { } 

Maggiori informazioni disponibili qui: https://angular.io/guide/ngmodule#create-the-feature-module

Qualunque cosa tu voglia usare da un altro modulo, inseriscilo nella matrice di esportazione . Come questo-

  @NgModule({ declarations: [TaskCardComponent], exports: [TaskCardComponent], imports: [MdCardModule] }) 

RISOLTO COME USARE UN COMPONENTE DICHIARATO IN UN MODULO IN ALTRI MODULI.

Basato sulla spiegazione di Royi Namir (Grazie mille). C’è una parte mancante per riutilizzare un componente dichiarato in un Modulo in qualsiasi altro modulo mentre viene utilizzato il caricamento lazy.

1 °: esporta il componente nel modulo che lo contiene:

 @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] <== this line }) export class TaskModule{} 

2 °: nel modulo in cui si desidera utilizzare TaskCardComponent:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MdCardModule } from '@angular2-material/card'; @NgModule({ imports: [ CommonModule, MdCardModule ], providers: [], exports:[ MdCardModule ] <== this line }) export class TaskModule{} 

In questo modo il secondo modulo importa il primo modulo che importa ed esporta il componente.

Quando importiamo il modulo nel secondo modulo, dobbiamo esportarlo di nuovo. Ora possiamo usare il primo componente nel secondo modulo.

Un grande e grande approccio è caricare il modulo da un NgModuleFactory , è ansible caricare un modulo all’interno di un altro modulo chiamando questo:

 constructor(private loader: NgModuleFactoryLoader, private injector: Injector) {} loadModule(path: string) { this.loader.load(path).then((moduleFactory: NgModuleFactory) => { const entryComponent = (moduleFactory.moduleType).entry; const moduleRef = moduleFactory.create(this.injector); const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent); this.lazyOutlet.createComponent(compFactory); }); } 

L’ho preso da qui .