Verwendung von ng2Modules in einem Projekt

Question

Ich habe ein gemeinsames Modul in meiner App, ich habe alle meine Komponenten aus dem gemeinsamen Ordner in einem einzigen Modul gebündelt.

Was ich jetzt brauche ist, wie importiere ich Klassen von diesem Modul?

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule, ModuleWithProviders } from '@angular/core'; 

import { MaterialModule } from '@angular/material'; 
import { AgGridModule } from 'ag-grid-ng2/main'; 

import { TreeModule } from 'angular2-tree-component'; 

import { 
    GenericTabsComponent, DateNavigatorComponent, 
    ErrorMessage, FavoriteListComponent, GenericContentComponent, GenericFormComponent, 
    GenericListComponent, GenericLookupComponent, GenericPopupComponent, GlobalActionsComponent, LoadingComponent, 
    UnitListComponent, UnitSubunitFavoriteItemComponent, UnitSubunitFieldComponent, UnitSubunitItemComponent, 
    WeekstartComponent, AutoCompleteComponent, ChipsInputComponent, FilterboxComponent, GridCellActionComponent, GenericTabHeaderComponent, 
    ActionGridComponent, ComboBoxComponent, TextareaComponent 
} from './index'; 

@NgModule({ 
    id: "@app/components", 
    imports: [BrowserModule, FormsModule, ReactiveFormsModule, MaterialModule, AgGridModule, TreeModule], 
    exports: [FormsModule, ReactiveFormsModule, GenericTabsComponent, DateNavigatorComponent, 
     ErrorMessage, FavoriteListComponent, GenericContentComponent, GenericFormComponent, 
     GenericListComponent, GenericLookupComponent, GenericPopupComponent, GlobalActionsComponent, LoadingComponent, 
     UnitListComponent, UnitSubunitFavoriteItemComponent, UnitSubunitFieldComponent, UnitSubunitItemComponent, 
     WeekstartComponent, AutoCompleteComponent, ChipsInputComponent, FilterboxComponent, GridCellActionComponent, GenericTabHeaderComponent, 
     ActionGridComponent, ComboBoxComponent, TextareaComponent], 
    declarations: [GenericTabsComponent, DateNavigatorComponent, 
     ErrorMessage, FavoriteListComponent, GenericContentComponent, GenericFormComponent, 
     GenericListComponent, GenericLookupComponent, GenericPopupComponent, GlobalActionsComponent, LoadingComponent, 
     UnitListComponent, UnitSubunitFavoriteItemComponent, UnitSubunitFieldComponent, UnitSubunitItemComponent, 
     WeekstartComponent, AutoCompleteComponent, ChipsInputComponent, FilterboxComponent, GridCellActionComponent, GenericTabHeaderComponent, 
     ActionGridComponent, ComboBoxComponent, TextareaComponent], 
}) 
export class ComponentsModule { 
    static forRoot(): ModuleWithProviders { 
     return { 
      ngModule: ComponentsModule, 
      providers: [] 
     }; 
    } 
} 

Dies ist der freigegebene Ordner und die App-Struktur sieht so aus.

app-> shared-> components.module // hier sind alle Komponenten
app-> main.page // ein Modul für eine Seite
app-> users.page // ein Modul für ein andere Seite
app-> main.app.module // die root-Modul

Jetzt in main.page ich brauche eine Komponentenklasse zu importieren, zum Beispiel GenericListComponent, aus dem gemeinsamen Modul ein ViewChild und geben Sie den Typen erstellen . Von wo importiere ich die Klasse GenericListComponent? Aus dem Speicherort der Datei, oder der Import wird etwa so aussehen?

Auch, wenn ich 2 Seitenmodule mit Last Kinder haben und sie Komponenten aus freigegebenen verwenden. Wo lege ich mein freigegebenes Modul in die App-Hauptkomponente oder spezifiziere ich es als Import in jedes Modul?

Answer 1

Sie müssen Ihre Komponenten aus dem Speicherort der Datei importieren, eine Sache ist jedoch, dass Sie mit ES2015 Export-Funktion spielen können.

dies so vorstellen, auf Ihrem GenericListComponent Ordner ein index.ts mit diesem erstellen:

export * from './generic-list.component'; 

Dies wird grundsätzlich Reexport alles, was auf Ihrem generic-list.component

Jetzt auf Ihrem shared/ Ordner exportiert erstellen wir ein anderes index.ts wieder alles wieder zu exportieren:

export * from './generic-list'; 

Wenn Sie bemerken, dass wir nur den Ordner generic-list/ referenzieren, weil darin ein index.ts ist.

Also in diesen Ort jetzt auf Ihrem main.page können Sie dies:

import { GenericListComponent } from './shared' 

Jetzt einfach wiederholen Sie den Vorgang für jeden Ordner in Ihrem shared/ Ordner und mehrere Zeilen zum index.ts in Ihrem shared/ hinzuzufügen.