我无法导航到另一个内部的路由器插座

Question

我的项目中有 2 个路由器插座，一个在另一个里面，第一个是默认应用程序路由器插座，第二个在我想要的 'home' 组件之一内当我点击工具栏时显示其他组件所以这是我找到的导航到第二个的解决方案
html 文件:

   <mat-toolbar >
      <a routerLink="/sessionag">Session</a>


      <button mat-button style="background-color: #80D0D0" (click)="logout()">logout</button>

    </mat-toolbar>
    <mat-drawer-container >
      <mat-drawer-content style="color: #333333 ;background-color: white">
        <router-outlet name="second"></router-outlet>

      </mat-drawer-content>
    </mat-drawer-container>

AppRoutingModule 文件：

 const routes: Routes = [

  {path:'sessionag',
    component:SessionAgComponent,outlet:'second'},

];

但这对我不起作用，我不知道为什么。
我是不是做了错事，还是没有像这样工作

Answer 1

如果您不导航到主路由器，则必须告诉 angular 您要路由到 router-outlet 的目标。

使用 routerLink 指令，您可以指定要路由到的插座：

<a 
  [routerLink]="[{ outlets: {second: ['sessionag'] } }]">
  Session
</a>

Demo 在 Stackblitz

Answer 2

所以我实际上正在寻找的是另一个内部的路由器插座，我找到的答案是将该组件添加为我想要添加第二个路由器插座的组件的子组件，如下所示：
在应用程序路由模块中

    const routes: Routes = [
      {path:'home',
    component:HomepageComponent,
    children:[
      {path:'sessionag',
        component:SessionAgComponent},
      {path:'sessiontek',
        component:SessionTekComponent},
    ]
  },
];

在.ts文件中

this.router.navigate(['/home/sessionag']);

在HTML文件中

 <router-outlet ></router-outlet>

我无法导航到另一个内部的路由器插座

i can't navigate to router-outlet inside another

router

angular