2016-12-12 8 views
0

Я новичок в Angular 2. Мое приложение использует 2 шаблона, один для гостя и другой для аутентифицированных пользователей. Чтобы сделать это, я поставил это в app.component.htmlУгловой 2 - Переопределение маршрута с угловым маршрутом 3.3.0

<router-outlet name="header"></router-outlet> 
<router-outlet name="left"></router-outlet> 
<router-outlet></router-outlet> 
<router-outlet name="footer"></router-outlet> 

В моих app.routes.ts файл я определил выходы для авторизованных пользователей, как что:

export const routes: Routes = [ 
    { path: '', component: LoginComponent }, 
    { path: '' , component: HeaderComponent, outlet: 'header' }, 
    { path: '' , component: LeftComponent, outlet: 'left' }, 
    { path: '' , component: FooterComponent, outlet: 'footer' }, 
    ... 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes); 

Но для гостевых пользователей в моем LoginComponent я хочу заменить компоненты розетки на EmptyComponent следующим образом:

{ path: '' , component: EmptyComponent, outlet: 'left' } 

Маршруты загружаются в app.module.ts:

import { routing } from './app.routes'; 

@NgModule({ 
    imports: [ 
    ... 
    routing 
    ], 
    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    LeftComponent, 
    FooterComponent, 
    LoginComponent 
    ], 
    providers: [ 
    ... 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

Но я не знаю, как сделать это. Я попытался с директивой @Routes, но я использую угловую-рут-3.3.0 и эта директива удаляется ...

ответ

1

вы можете resetConfig после входа в, как показано ниже,

initiallly,

{ path: '' , component: EmptyComponent, outlet: 'footer' } 

После входа в системе,

this.router.resetConfig([ 
     { path: '', component: MainComponent }, 
     ... 
     { path: '' , component: FooterComponent, outlet: 'footer' } 
     ... 
    ]); 

Надеется, что это помогает !!

+0

Спасибо за ваш ответ. Я импортирую все URL-адреса в app.routes, затем создаю «user.component», который определяет новые маршруты и вызывает «this.router.resetConfig», а затем «Записанные компоненты» расширяет «user.component», но «resetConfig» не имеет эффекта (и нет ошибка в консоли) – Maxime

+0

Предполагаю, что вы сначала заходите в какой-то путь для входа в систему, а затем меняете routeconfig, если успешно прошли проверку подлинности, а затем переходите обратно? –

+0

О, теперь я вызываю 'resetConfig' после входа в систему, прежде чем перенаправить пользователя. Но теперь у меня есть эта ошибка: «Unhandled Promise rejection: ошибки анализа шаблона: « router-outlet »не является известным элементом: 1. Если« роутер-розетка »является угловым компонентом, проверьте, что он является частью этого модуль. 2. Если «маршрутизатор-розетка» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@ NgModule.schemas» этого компонента для подавления этого сообщения. («[ERROR ->] Maxime

0

Хорошо, я исправлю свою проблему. Спасибо @Madhu за вашу помощь.

1 - импортировать маршруты по умолчанию (для гостей) в моих app.routes

2 - Когда пользователь вошел в I обновления маршрутов благодаря Madhu Ranjan ответ

3 - Затем я добавляю список компонентов, используемых в точке 2 в app.module.ts с ключом entryComponents