2016-12-07 4 views
6

У меня есть основной модуль и некоторые подмодули. И я хочу указать некоторую нетривиальную маршрутизацию между ними.Angular2 Routing: импортировать подмодуль с маршрутированием + сделать его префикс

Я предпочел бы определять маршруты подмодуля внутри подмодуля. Например .:

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

Я хочу, чтобы импортировать этот модуль со своей собственной внутренней маршрутизацией, но я хочу, чтобы вся его маршрутизация приставки.

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

Эта настройка создает следующие маршруты: /country, /country/list и т.д., но я хочу, чтобы сделать их приставкой, как это:

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

Есть и другие модули которые я хочу получить через другую маршрутизацию, например. a CityModule под /otherstuff/city/create и/другие товары/город/список`.

Мои вопросы:

  1. Можно ли импортировать модуль со своей собственной маршрутизации и сделать его маршруты приставкой?
  2. Кроме того: существует ли способ сделать связи между двумя субмодулями агностически их конечными (префиксными) маршрутами?

UPDATE

Принятый ответ лучший способ сделать это: создать маршруты в модуле, зарегистрировать их извне. Таким образом, вы можете изменить маршруты, например. префикс их (это то, что я хотел), вы можете определить охранников, переопределить или фильтровать их и т.д.

+1

Извините. Вот вопрос: http://stackoverflow.com/questions/39131350/nesting-angular2-rc5-routes-multiple-files –

ответ

5

в вашем appRoutes добавить дочерний маршрут как

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

создать отдельный файл маршруты

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

]; 

В CountryComponent.html

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

Просто пояснить: нет способа изменить маршрутизацию модуля после его импорта в модуль ? –

+0

@ Габор Имре, вы не можете. –

5

Игра с этой Routing материал, который я только что нашел чистый способ, которым я хотел бы поделиться, для обработки маршрутов подмодулей без головных болей и любви Угловая еще больше.Взяв пример OP, я предложат вам изучить следующий код:

Добавить функцию утилиты в ваш подмодуль CountryModule, загрузить его динамически с маршрутизатора и избежать предупреждения компилятора о замене функции стрелки ссылкой к экспортируемой функции:

@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; 
} 

Теперь вы можете импортировать, что Entrypoint в свой родительский модуль, в котором вы хотите разместить маршруты:

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

И там вы идете! Теперь вы можете достичь своих подмодульных компонентов с помощью settings/country/list и settings/country/list.

ПРЕДУПРЕЖДЕНИЕ

Будьте осторожны, чтобы не импортировать CountryModule в свой родительский модуля @NgModule, потому что он будет перекрывать маршруты вне settings пути. Пусть маршрутизатор выполнит эту работу.

Наслаждайтесь!

+0

Это должен быть принятый ответ. Обратите внимание, что вам не нужно экспортировать «точку входа», которую вы могли бы просто выполнить «loadChildren:() => CountryModule'. –

+0

@MichaelPetito мы могли бы, но есть ошибка/предупреждение с угловым/cli, который жалуется на использование lambdas и предлагает заменить их на экспортированные функции;) –

+1

Возможно, вы должны подчеркнуть больше, ваше предупреждение «не импортировать в родительский модуль». Ты спас меня от почесывания головы и пробегала по кругу. – fossil

 Смежные вопросы

  • Нет связанных вопросов^_^