角度2 - ルーターアウトレット付きの子ルート

Question

ルートが「メイン」に変更されたときに読み込まれるコンポーネントがあります。 私はそのルートに 'test'という子ルートを定義しました

ルートがmain/testに設定されている場合、テストコンポーネントをメインコンポーネント内にロードします。メインコンポーネントの内部には、子コンポーネントを表示するためのルータアウトレットがあります。私が持っているhtmlの主要コンポーネントで

import { Route } from '@angular/router'; 
    import { MainComponent } from './main.component'; 
    import { TestComponent } from './test/test.component'; 
    import { SessionGuard } from '../../services/session/session.guard'; 

    export const MainRoutes: Route[] = [ 
     { 
     path: 'main', 
     component: MainComponent, 
     canActivate: [SessionGuard], 
     children: [ 
     { path: 'test', component: TestComponent } 
    ] 
    } 
]; 

：ここ

は私main.routes.tsある

Main 
<router-outlet></router-outlet> 

私は取得していますエラーは次のとおりです。 はメイン/テストルートを照合することはできません

ルート変更をトリガーするボタン：

<button type="button" class="btn btn-default" (click)="changeRoute('main/test');" >Test</button> 

ルートを変更する方法：

changeRoute(route: string) { 
    event.stopPropagation(); 
    this.router.navigate([route]); 
} 

おかげ

Answer 1

router-outletを空にすることはできません。これは、メインコンポーネントにリダイレクトするときに、デフォルトの子ルーターセットがないことを意味します。あなただけの、あなたが設定の下に使用する必要があり、ボタンのクリックイベントでtestにリダイレクトしたい場合は、ちょうどあなたがにリダイレクトんか

export const MainRoutes: Route[] = [ 
     { 
     path: 'main', 
     component: MainComponent, 
     canActivate: [SessionGuard], 
     children: [ 
        {path:'',component:null},  //<<<<### here with null value 
        {path: 'test', component: TestComponent } 
    ]