如何在组件内部使用 Angular 路由器插座，而该组件本身是通过主路由器插座提供服务的？

Question

我正在尝试让 router-outlet 在 DashboardComponent 中工作，它本身是通过 app.component.html 中的 router-outler 服务的。

我试图实现的流程是这样的：

用户登录后，用户被重定向到 /dashboard，这将加载 DashboardComponent。
DashboardComponent 包含 mat-sidenav-container 和 mat-sidenav link 和一个 div 容器，我必须在其中提供不同的组件- AComponent、BComponent、CComponent 取决于在 mat-sidenav 中单击的 link。

也就是说，路径 localhost:4200/dashboard/componentA 应该在 DashboardComponent 的 div 容器中显示 AComponent 等等。

路径 /dashboard 应该重定向到 /dashboard/componentA

我很难弄清楚如何使用 router-outlet.

显示 DashboardComponent 中的组件

这可能吗？有没有更好的方法来做到这一点？

Working code

**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

您所做的工作，稍作修改。

首先，您不需要为仪表板组件内的路由器插座分配名称。命名插座有不同的用例，您可以阅读它们 here:

这是您需要进行的修改

从 app.routing.ts
从 dashboard.component.html
从标签 dashboard.component.html 中的 [routerLink] 中删除 'dashboard/'。由于这些路线是当前激活路线的子路线，因此它们的路径将自动附加在仪表板之后。

//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。

Updated code

Answer 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

我已经对您的路由文件和仪表板组件文件进行了一些修改。

首先你不需要使用命名路由。其次，子路由采用父路由的初始路径，因此无需再次提供它们，您可以直接在路由器 link.

中指定子路由名称

您可以在此处查看工作代码

working code

希望这能解决您的问题。

Answer 4

你只需要改变你的路由文件。

首先你需要重定向 path: '' 到 dashboard:

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

children 的空白路由应该重定向到 componentA:

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

基本上你的更新路线如下：

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: '' }
];

我还从你的演示中分叉并创建了 working demo。

如何在组件内部使用 Angular 路由器插座，而该组件本身是通过主路由器插座提供服务的？

How to use Angular router outlet inside a component which itself is served via primary router outlet?

angular2-routing

angular