Angular 2 - 使用角度路由覆蓋路由3.3.0

我是Angular 2的新用戶。我的應用使用2個模板，一個用於訪客，另一個用於已認證的用戶。要做到這一點，我設置的app.component.htmlAngular 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，該指令被刪除...

來源

2016-12-12 Maxime

你可能resetConfig您登錄後在像下面，

initiallly，

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

後登錄，

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

希望這有助於！

來源

2016-12-12 19:37:23

感謝您的回答在app.module.ts點2。我在app.routes中導入所有的url，然後創建一個定義新路由並調用'this.router.resetConfig'的'user.component'，然後Logged In組件擴展'user.component'，但是'resetConfig'沒有效果（並且沒有錯誤在控制檯） – Maxime

我假設你要先登錄一些登錄路徑，然後如果驗證成功，然後更改routconfig，然後導航回來？ –

哦，現在我在登錄後調用'resetConfig'，然後重定向用戶。但是現在我有這樣的錯誤：'未處理的Promise拒絕：模板解析錯誤： 'router-outlet'不是已知的元素： 1.如果'router-outlet'是一個Angular組件，那麼驗證它是否屬於這個模塊。 2.如果'router-outlet'是一個Web組件，則將「CUSTOM_ELEMENTS_SCHEMA」添加到此組件的「@ NgModule.schemas」中以禁止此消息。（「[ERROR - >] Maxime

好的我解決了我的問題。感謝@Madhu的幫助。

1 - 我引入缺省路由（來賓）在我app.routes

2 - 當用戶在我更新的路線感謝記錄到Madhu Ranjan答案

3 - 然後，添加使用的組件列表在密鑰entryComponents

來源

2016-12-12 22:21:23 Maxime

Angular 2 - 使用角度路由覆蓋路由3.3.0

回答

相關問題