プライマリルータのコンセント経由で提供されるコンポーネントの内部に角型ルータのコンセントを使用するにはどうすればよいですか？

Question

router-outletをDashboardComponentの中に作成しようとしています。router-outlerは、app.component.htmlに存在します。

私が達成しようとしている流れはこのように書きます：ユーザーがログインした後

• は、ユーザーがDashboardComponentをロードします/dashboardにリダイレクトされます。 mat-sidenavでクリックしたリンクに応じてAComponent、BComponent、CComponent -

• DashboardComponentはmat-sidenav-containermat-sidenavとのリンクやdivコンテナ、私はさまざまなコンポーネントを提供する必要があり、その内部が含まれています。ある

、パスlocalhost:4200/dashboard/componentAはそうでDashboardComponentさんのdivコンテナ内AComponentとを示すべきです。

• パス/dashboardは私がrouter-outletを使用してDashboardComponent内部の部品を表示する方法を把握しようと苦労しています/dashboard/componentA

にリダイレクトする必要があります。

これは可能ですか？これを行うための良い方法はありますか？

の作業コード：https://stackblitz.com/edit/angular-qvacwn/

app.routing.ts

import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 

import { AComponent } from './a/a.component'; 
import { BComponent } from './b/b.component'; 
import { CComponent } from './c/c.component'; 

export const appRoutes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'dashboard', component: DashboardComponent, outlet: 'dashboard', 
    children: [ 
     { path: '', component: AComponent }, 
     { path: 'componentA', component: AComponent }, 
     { path: 'componentB', component: BComponent }, 
     { path: 'componentC', component: CComponent } 

     ]}, 

    // otherwise redirect to home 
    // { path: '**', redirectTo: '' } 
]; 

Answer 1

あなたは、いくつかの修正を加えた作品を、が何をしています。

まず、ダッシュボードコンポーネント内のルータコンセントに名前を割り当てる必要はありません。名前付きコンセントが異なるユースケースを持って、あなたはここでそれらについて読むことができます：ここでhttps://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

あなたは

1. がapp.routing.ts
でダッシュボードのルートからの出口プロパティを削除するようにする必要があり修正されています
2. dashboard.component.htmlのルータアウトレットから名前ディレクティブを削除してください

3. タグダッシュボードの[routerLink]から「ダッシュボード/」を削除してください。これらのルートは現在アクティブ化されているルートの子であるため、パスは自動的にダッシュボードの後に​​追加されます。

   //dashboard.component.html 
   <mat-sidenav #sidenav align="start" position="start" mode="side" opened="true" class="example-sidenav side-nav-style"> 
       <ul> 
       <li> 
        <a [routerLink]="['componentA']">componentA</a> 
       </li> 
       <li> 
        <a [routerLink]="['componentB']">componentB</a> 
       </li> 
       <li> 
        <a [routerLink]="['componentC']">componentC</a> 
       </li> 
       </ul> 
   </mat-sidenav> 
   <div class="content"> 
       <p> 
       dashboard works! 
       </p> 
       <router-outlet></router-outlet>   
   </div> 
   
   //app.routing.ts 
   children: [ 
   // { path: '', component: AComponent }, 
   { path: 'componentA', component: AComponent }, 
   { path: 'componentB', component: BComponent }, 
   { path: 'componentC', component: CComponent }, 
   { path: '', redirectTo: 'componentA', pathMatch: 'full'} 
   ]}, 
   

また、私は子供の配列の最初の行をコメントし、最後に新しいものと交換し気づきます。この方法を使用すると、パスが空の場合は常に空のパスにcomponentAを表示するのではなく、自動的にcomponentAにリダイレクトされ、ルートも変更されます。

更新コード：https://stackblitz.com/edit/angular-ah4f2u

Answer 2

あなたは基本的に2つのルートが同じコンポーネントに指摘しています。

{ path: '', component: DashboardComponent }, 
{ path: 'dashboard', component: DashboardComponent, } 

目的の動作を達成するには、リダイレクトを使用する必要があります。 dashboard.html - 子コンポーネントへのリンクは絶対的です - あなたのケースではナビゲーションが途切れる - 相対リンクを使用することを検討してください。この場合もルートコンセントの名前を指定する必要はありません。適切なルーティング設定で箱から出てきます。 上記のすべてを修正したら、ナビゲーションが機能し始めました。以下

参照コードサンプル：

app.routing.ts

export const appRoutes: Routes = [ 
{ path: '', pathMatch: "full", redirectTo: 'dashboard' }, 
{ 
    path: 'dashboard', 
    component: DashboardComponent , 
    children: [ 
    { path: 'componentA', component: AComponent }, 
    { path: 'componentB', component: BComponent }, 
    { path: 'componentC', component: CComponent } 

    ]}, 

]。

dashboard.component.html

<mat-sidenav #sidenav align="start" position="start" mode="side" opened="true" class="example-sidenav side-nav-style"> 
    <ul> 
    <li> 
     <a [routerLink]="['./componentA']">componentA</a> 
    </li> 
    <li> 
     <a [routerLink]="['./componentB']">componentB</a> 
    </li> 
    <li> 
     <a [routerLink]="['./componentC']">componentC</a> 
    </li> 
    </ul> 
</mat-sidenav> 

Answer 3

私はあなたのルーティングファイルやダッシュボード・コンポーネント・ファイルにいくつかの変更を行いました。

まず名前付きルートを使用する必要はありません。 第2に、子ルートは親の初期パスを取るため、再度指定する必要はなく、ルータリンクに子ルート名を直接指定できます。

あなたがここに

working code

を作業コードを確認することができますが、これはあなたの問題を解決したいと考えています。

Answer 4

ルーティングファイルを変更するだけで済みます。

まず第一に、あなたがdashboardにpath: ''をリダイレクトする必要があります。子供の

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 

、空白のルートはcomponentAにリダイレクトする必要があります。

export const appRoutes: Routes = [ 
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 

    { path: 'dashboard', component: DashboardComponent, 
    children: [ 
     { path: '', redirectTo: 'componentA', pathMatch: 'full' }, 
     { path: 'componentA', component: AComponent }, 
     { path: 'componentB', component: BComponent }, 
     { path: 'componentC', component: CComponent } 

    ]}, 

    // otherwise redirect to home 
    // { path: '**', redirectTo: '' } 
]; 

：

{ path: '', redirectTo: 'componentA', pathMatch: 'full' }, 

だから基本的に、あなたの更新のルートは次のようになり

私もフォークして0を作成しましたデモの