RouterConfig с несколькими компонентами (@ angular/router: 3.0.0-beta.2)

Question

Возможно ли связать RouterConfig с различными компонентами с этим обновленным угловым маршрутизатором?

Например, у меня есть два компонента, на моих «app.components.ts»:

@Component({ 
    template: require('./app.component.html'), 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

шаблона в этом компоненте включает в себя пользовательский вид украшения + маршрутизатор-выход для дочерних компонентов.

export const insideRoutes: RouterConfig = [ 
    { path: 'dashboard', component: DashboardComponent } 
]; 

И имеет свой собственный маршрутизатор, который будет загружать этот компонент по указанному маршруту.

Также у меня есть верхний компонент уровня:

@Component({ 
    selector: 'app', 
    pipes: [], 
    providers: [ AppState ], 
    template: '<router-outlet></router-outlet>', 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

шаблона в этом компоненте будет иметь только пользовательский (логин) страницу.

export const outsideRoutes: RouterConfig = [ 
    { path: 'login', component: LoginComponent } 
)} 

И я хочу загрузить этот компонент, только используя маршрут на RouterConfig выше.

Я попытался включить оба RouterConfig в фильме "app.routes.ts", как это:

export const appRouterProviders = [ 
    provideRouter([outsideRoutes, insideRoutes]) 
]; 

Linked "appRouterProviders" для начальной загрузки приложения в "main.browser.ts":

export function main(initialHmrState?: any): Promise<any> { 
    return bootstrap(AppComponent, [ 
    ...PROVIDERS, 
    ...DIRECTIVES, 
    ...PIPES, 
    ...APP_PROVIDERS, 
    ...ENV_PROVIDERS, 
    ...HTTP_PROVIDERS, 
    appRouterProviders, 
    provide(LocationStrategy, { useClass: HashLocationStrategy }) 
    ]).catch(err => console.error(err)); 
} 

Но получил ошибку маршрутизатора.

Если я использую только один RouterConfig, как это:.

export const appRouterProviders = [ 
    provideRouter(outsideRoutes) // or insideRoutes 
]; 

Это работает, но он использует только мой корневой компонент (компонент верхнего уровня, который имеет только маршрутизатор-выход

В хотя бы я получил эту работу на «angular2: 2.0.0-beta.14» со старым и полезным @RouteConfig

Answer 1

Может быть, я получил причину вашей ошибки Вы должны объединить 2 RouteConfigs в 1, не provideRouter([outsideRoutes, insideRoutes]) Лучше так.. сделать это с помощью оператора спреда:

export const appRouterProviders = [ 
    provideRouter([...outsideRoutes, ...insideRoutes]) 
]; 

Answer 2

Ну, я собираюсь отдельный маршрут к различным компонентам вместо многократного RouterConfig в «app.component.ts».

Создан «средний» компонент, который будет перенаправлять на детей. Называется это «меню».

компонент Root (app.component.ts) имеют только один верхний компонент уровня:

@Component({ 
    selector: 'app', 
    pipes: [], 
    providers: [ AppState ], 
    template: '<router-outlet></router-outlet>', 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

Здесь я покажу только страницу входа в систему (LoginComponent).

От «LoginComponent» я перенаправляюсь в «AppMenuComponent». Этот компонент меню имеет старый шаблон (шаблон: require («./ app.component.html») - с пользовательскими украшениями и собственный роутер-выход для дочерних компонентов).Вот как это выглядит:

@Component({ 
    template: require('./app.component.html'), 
    directives: [ ROUTER_DIRECTIVES ] 
}) 

Это отдельный файл под названием «app-menu.component.ts».

Последний шаг - RouterConfig (в "app.routes.ts"):

export const routes: RouterConfig = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'menu', component: AppMenuComponent, 
    children: [ 
     { path: '', component: AppMenuComponent }, 
     { path: 'dashboard', component: DashboardComponent } 
    ] 
    } 
]; 

Как я уже сказал, после авторизации страницы "Меню" компонент будет загружен. Он будет содержать все дочерние компоненты, которые будут использовать маршрутизатор-выход из компонента «Меню», а не на выходе маршрутизатора верхнего уровня.