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

Question

我正在尝试制作一个router-outlet内部作品，DashboardComponent该作品本身可以通过中router-outler存在来提供app.component.html。

我试图实现的流程如下所示：

• 用户登录后，将用户重定向到/dashboardload DashboardComponent。

• DashboardComponent包含mat-sidenav-container有mat-sidenav链接和一个div容器，里面我有服务于不同的组件- ，，AComponent 根据链接点击了。BComponentCComponentmat-sidenav

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

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

我很难弄清楚如何显示DashboardComponentusing中的组件router-outlet。

这可能吗？有什么更好的方法吗？

工作代码：https : //stackblitz.com/edit/angular-qvacwn/

应用程序路由

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

你有什么作品，有一些修改。

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

以下是您需要进行的修改

1. 从 app.routing.ts 中的仪表板路由中删除 outlet 属性
2. 从dashboard.component.html中的路由器插座中删除名称指令
3. 从 a 标签中的 [routerLink] 中删除“dashboard/”dashboard.component.html。由于这些路线是当前激活路线的子级，因此它们的路径将自动附加在仪表板之后。

//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'}
]},

此外，请注意我注释了 children 数组中的第一行，并在最后用新行替换了它。使用这种方法，只要路径为空，它就会自动重定向到 componentA 并更改路由，而不仅仅是在空路径上显示 componentA。

更新代码