2016-12-07 18 views
6

Mam moduł główny i kilka submodułów. Chcę podać kilka niełatwych połączeń między nimi.Angular2 Routing: importuj moduł z routingiem + ustawiając go prefiksem

Wolałbym definiować trasy modułu częściowego w module danych. Np .:

@NgModule({ 
    imports: [ 
     /*...*/ 
     RouterModule.forChild([ 
      { path: 'country', redirectTo: 'country/list' }, 
      { path: 'country/list', component: CountryListComponent }, 
      { path: 'country/create', component: CountryCreateComponent }, 
      /*...*/ 
     ]) 
    ], 
    declarations: [/*...*/], 
    exports: [ 
     RouterModule, 
    ], 
}) 
export class CountryModule {} 

chcę zaimportować ten moduł z własnym routingu wewnętrznego, ale chcę, aby cała jej routingu prefiksem.

const appRoutes = [ 
    { path: '', component: HomeComponent }, 
    /*... (basic routes)*/ 
]; 

@NgModule({ 
    imports: [ 
     /*...*/ 
     RouterModule.forRoot(appRoutes), 
     CountryModule, // <- how to make its routing prefixed?? 
    ], 
    declarations: [ 
     /*...*/ 
     AppComponent, 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

tych ustawień tworzy następujących trasach: /country, /country/list, etc., ale chcę, aby były poprzedzone tak:

  • /settings/country
  • /settings/country/list
  • /settings/country/create

Istnieją inne modu do których chcę uzyskać dostęp poprzez inne trasy, np. a CityModule pod /otherstuff/city/create i/otherstuff/city/list`.

Moje pytania:

  1. to możliwe, aby zaimportować moduł z własnym routingiem i dokonać jego trasy prefiksem?
  2. Ponadto: Czy istnieje sposób na powiązanie dwóch submodułów z ich końcowymi (prefiksowanymi) trasami?

UPDATE

Zaakceptowanych odpowiedź jest najlepszym sposobem, aby to zrobić: tworzenie tras w module, zarejestrować je na zewnątrz. W ten sposób możesz modyfikować trasy, np. poprzedzić je (to co chciałem), można zdefiniować strażników, zastępują lub filtrować je itd

+1

Przepraszamy. Tutaj jest pytanie: http://stackoverflow.com/questions/39131350/nesting-angular2-rc5-routes-multiple-files –

Odpowiedz

5

w swoim appRoutes dodać trasę dziecięcą jak

const appRoutes = [ 
    { path: '', component: HomeComponent }, 
    { 
    path: 'settings', 
    component: CountryComponent, 
    canActivate: [AuthGuard], 
    children: COUNTRY_ROUTES 
    }, 
]; 

utworzyć osobne trasy złożyć

export const COUNTRY_ROUTES:Routes = [ 
    { path: 'country', redirectTo: 'country/list' }, 
    { path: 'country/list', component: CountryListComponent }, 
    { path: 'country/create', component: CountryCreateComponent }, 

]; 

W CountryComponent.html

<router-outlet></router-outlet> 
+0

Wystarczy wyjaśnić: Nie ma możliwości zmiany routingu modułu po jego zaimportowaniu do modułu ? –

+0

@ Gábor Imre, nie możesz. –

5

Odtwarzanie z tym Routing rzeczy właśnie znalazłem czysty sposób Chciałbym się podzielić, poradzić sobie z drogami submodułów bez bólu głowy i miłości Angular jeszcze bardziej.Biorąc przykład z OP jako przykładu, proponuję zapoznać się z następującym kodem:

Dodaj funkcję użyteczną do swojego submodułu CountryModule, aby załadować ją dynamicznie z routera i uniknąć ostrzeżenia kompilatora o zamianie funkcji strzałki na odniesienie do eksportowanego funkcję:

@NgModule({ 
    imports: [ 
    ... 
    RouterModule.forChild([ 
     { path: 'country', pathMatch: 'full', redirectTo: 'list' }, 
     { path: 'country/list', component: CountryListComponent }, 
     { path: 'country/create', component: CountryCreateComponent }, 
    ]) 
    ], 
    declarations: [ ... ], 
    exports: [ 
    RouterModule, 
    ], 
}) 
export class CountryModule {} 

export function CountryEntrypoint() { 
    return CountryModule; 
} 

teraz można importować że punkt_wejścia do modułu nadrzędnego, w którym chcesz umieścić trasy:

@NgModule({ 
    imports: [ 
    ... 
    RouterModule.forRoot([ 
     { path: '', pathMatch: 'full', component: HomeComponent }, 
     { path: 'settings', loadChildren: CountryEntrypoint } 
    ]), 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

I nie udać! Możesz teraz uzyskać dostęp do komponentów modułu pod numerami settings/country/list i settings/country/list.

UWAGA

Należy uważać, aby nie importować CountryModule do modułu rodzica @NgModule, ponieważ będzie on zastąpić trasy poza ścieżką settings. Pozwól routerowi wykonać zadanie.

Ciesz się!

+0

To powinna być zaakceptowana odpowiedź. Zauważ, że nie musisz eksportować "punktu wejścia", możesz po prostu zrobić 'loadChildren:() => CountryModule'. –

+0

@MichaelPetito mogliśmy, ale jest błąd/ostrzeżenie z kątowym/cli, które narzeka na używanie lambdas i sugerują zastąpienie ich eksportowanymi funkcjami;) –

+1

Prawdopodobnie powinieneś podkreślić więcej, twoje ostrzeżenie "nie importować do modułu nadrzędnego". Uratowałeś mnie od drapania głowy i biegania w kółko. – fossil