2017-02-12 33 views
7

Zrobiłem aplikację Angular2, jak opisano here. Ma dwa komponenty (A, B), które są importowane przez globalny numer app.module. Mój pomysł polegał na tym, aby dołączyć wspólne moduły w app.module, więc nie muszę zepsuć każdego modułu z nadmiarowym kodem. Chcę to zrobić na przykład z FormsModule. Więc w app.module mamDziedzicz importowanie z modułu nadrzędnego do modułu podrzędnego w Angular2

imports: [ 
    UniversalModule, 
    CommonModule, 
    FormsModule, 
    AModule 
    RouterModule.forRoot([]) 
], 

exports: [FormsModule] 

Ale w module A mam wyjątek Can't bind to 'ngModel' since it isn't a known property of 'select'. który wydaje spowodowanego brakującej FormsModule. Działa to tylko wtedy, gdy importuję FormsModule w każdym module potomnym również za pomocą imports: [FormsModule]. Właśnie tego chcę uniknąć.

Według this question, próbowałem zaimportować AppModule w module dziecko A. To nie działa i daje mi wyjątek Exception: Call to Node module failed with error: Error: Unexpected value 'undefined' imported by the module 'AModule'

Jak mogę odziedziczyć importu modułów podrzędnych? Też potrzebuję tego dla rur.

Odpowiedz

6

Po prostu utwórz moduł funkcji (lub moduł współdzielony), który eksportuje komponenty, dyrektywy i rury, które są zwykle używane razem i importuj ten moduł do modułów, w których chcesz użyć dowolnego z nich.

Nie ma możliwości udostępnienia komponentów, dyrektyw lub rur na całym świecie. Należy je dodać do importu każdego modułu, w którym są używane. Wszystko, co możesz zrobić, to połączyć moduły i udostępnić je, importując tylko jeden lub kilka modułów.

4

Wygląda na to, że można to zrobić tylko za pomocą wspólnego modułu, który zbiera wspólny import, np. @ Günter Zöchbauer. Znalazłem an example in the official docs, którego użyłem jako podstawa do tworzenia moje wspólny moduł dla tej operacji:

import { CommonModule } from '@angular/common'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 

import { ObjectKeysPipe } from './../shared/pipes/object-keys.pipe'; 

@NgModule({ 
    imports: [CommonModule], 
    declarations: [ 
     ObjectKeysPipe 
    ], 
    exports: [ 
     CommonModule, 
     FormsModule, 
     ObjectKeysPipe 
    ] 
}) 
export class GlobalSharedModule{} 

ten dzieli rurę niestandardową ode mnie (ObjectKeysPipe) i szeroko stosowane zarówno CommonModule i FormModule. Pomysł redukcji bałaganu zadziałał. W moich modułach aplikacji nie muszę dodawać wiązki importów/deklaracji. Zamiast tego wystarczy zaimportować mój moduł współdzielony w ten sposób:

import { GlobalSharedModule } from './../shared/global-shared.module'; 
@ngModule({ 
    imports: GlobalSharedModule 
}) 
+0

Jednym z celów jest NIE używanie łańcuchów o łańcuchach './../../../../../' do importowania moduły. Jakikolwiek sposób to zrobić? –

+0

@DouglasGaskell W twoim 'tsconfig.json' pod' compilerOptions', a następnie 'paths 'możesz zadeklarować ścieżkę typu' "store": ["src/store.ts"] '. Zobacz [link] (https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) –