web-dev-qa-db-ja.com

子ルーターアウトレットAngular2の設定

Angularのルーターがネストされた<router-outlet>タグをサポートしていると聞いたので、2つ使用しようとしています。私は最新のAngular-CLIを使用しており、ui-routerからAngularのルーターに変換しています。2つ目のルーターアウトレットでコンテンツを入力できません。

（親ルーティングは正常に機能しています）app-routing.module.ts

...
const routes: Routes = [
    { path: '', pathMatch: 'full', component: LoginComponent },
    { path: 'login', pathMatch: 'full', component: LoginComponent },
    { path: 'dashboard',
        pathMatch: 'full',
        component: DashboardComponent // this holds the second router-outlet
    },
    { path: '**', component: LoginComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

app.component.ts-これは単にルーターアウトレットを保持し、トップレベルで正常に動作します...

<router-outlet></router-outlet>

ダッシュボードは、ユニバーサルヘッダー、フッター、サイドバーなどを保持します。そのため、トップレベルのルーターコンセントに配置したいのはそのためです。 sub-router-outletは子ビューを生成しますが、生成しません。

試行1 dashboard-routing.module.ts

export const dashboardRoutes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', pathMatch: 'full', component: HomeComponent },
    { path: 'about', pathMatch: 'full', component: AboutComponent }
]
@NgModule({
    imports: [
        RouterModule.forChild(dashboardRoutes)
    ],
    exports: [ RouterModule ]
})
export class DashboardRoutingModule { }

Angular2に基づく2つのdashboard-routing.module.tsの試行：子ルート内の複数のルーターアウトレットとルーターアウトレット

export const dashboardRoutes: Routes = [
    {
        path: 'dashboard',
        children:[
            { path: '', component: DashboardComponent},
            { path: 'home', component: HomeComponent},
            { path: 'about', component: AboutComponent}
        ]
    }
 ]
@NgModule({
    imports: [
        RouterModule.forChild(dashboardRoutes)
    ],
    exports: [ RouterModule ]
})
export class DashboardRoutingModule { }

ダッシュボードテンプレート内では、このネストされたルーターアウトレットは表示されません。代わりに、app.component.htmlの最上位のルーターアウトレットが代わりに入力されます:(

dashboard.component.html

<header>...</header>
<aside class="sidenav">...<aside>

<!-- why can't I populate you? -->
<router-outlet></router-outlet>

**************回答、 PierreDuc に感謝します！ **************

app-routing.module.ts

// seems counter-intuitive that the dashboard component isn't actually in here..., but it works!
const routes: Routes = [
    { path: '', pathMatch: 'full', component: LoginComponent },
    { path: 'login', pathMatch: 'full', component: LoginComponent },
    { path: '**', component: LoginComponent }
];
@NgModule({
    imports: [
        RouterModule.forRoot(routes),
        DashboardRoutingModule // this is the magic. I'm assuming to put it second is better (though putting it first didn't seem to have any immediate negative effect)
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

dashboard-routing.module.ts

export const dashboardRoutes: Routes = [
    {
        path: 'dashboard',
        component: DashboardComponent,
        children:[
            { path: '', component: HomeComponent },
            { path: 'home', pathMatch: 'full', component: HomeComponent },
            { path: 'about', pathMatch: 'full', component: AboutComponent }
        ]
    }
]
@NgModule({
    imports: [
        RouterModule.forChild(dashboardRoutes)
    ],
    exports: [ RouterModule ]
})
export class DashboardRoutingModule { }

ルートから移動する方法は次のとおりです。

login.component.ts

... passed validation ...
this._router.navigate(['/dashboard']);
this._router.navigate(['/dashboard/home']);

または、ダッシュボードのサイドバーを介してrouterLink経由でルーティングします。dashboard.component.html

[routerLink]="['../login']" <!-- back to login, though the '../' seems less than ideal

または、routerLinkを介して子ルーターアウトレットへのダッシュボードビューで：dashboard.component.html：

[routerLink]="['../about']"
angularangular2-routingrouterangular2-template
16
Craig O. Curtis

子 router-outletsには、ルーター構成内のchildren配列が読み込まれます。しかし、重複が起こっています。 dashboard内のAppRoutingModuleエントリを削除して、試行2に進む必要があります。

app-routes

const routes: Routes = [
    { path: '', pathMatch: 'full', component: LoginComponent },
    { path: 'login', pathMatch: 'full', component: LoginComponent },
    { path: '**', component: LoginComponent }
];

DashboardRoutingModuleをそのまま2（children配列を使用）のままにして、このモジュールをAppRoutingModule内またはAppModuleにインポートします。

13
PierreDuc