时间戳

首页 > 解决方案 > 如何使用相同的角度路线在 2 个不同的路由器插座中渲染 2 个不同的组件？

angular - 如何使用相同的角度路线在 2 个不同的路由器插座中渲染 2 个不同的组件？

问题描述

我有 2 个视图，一个用于代表，一个用于管理员，当 /admin 路由激活时，管理员路由需要在主部分中呈现仪表板以及侧边栏部分中的管理侧边栏，我查看了一些youtube 视频和文档，用于有角度的命名路线，没有骰子。这是代码的简化版本

应用程序路由模块

const routes: Routes = [
    {
        path: 'admin',
        canActivate: [AdminGuard],
        component: AdminDashComponent
    },
    {
        path: 'admin',
        canActivate: [AdminGuard],
        component: AdminSidebarComponent,
        outlet: 'sidebar'
    }
];

模板

<app-banner
    [userIconSwitch]="auth.loggedIn"
    (userIconEvent)="userIconClicked()"
    (menuClicked)="bannerMenuClicked()">
    Datrix 2.0
</app-banner>
<mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav mode="side" [(opened)]="opened">
        <img src="https://i.ibb.co/6R6pcMm/MRG-Updated-Logo.jpg" alt=""/>
        <br />
        <div class="spacer"></div>
    </mat-sidenav>
    <router-outlet name="sidebar"></router-outlet>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

编辑

未命名的路线正在工作，而命名的路线则没有。

控制台中没有错误。

标签： angular

解决方案

要直接路由到router-outlets您的 url 应该是这样的：

http://localhost:4200/admin(侧边栏:admin)

如果您通过routerLink属性路由：

<a 
  [routerLink]="[{ outlets: { primary: ['admin'], sidebar: ['admin'] } }]">
  Navigate to admin on both outlets
</a>

stackblitz上的演示

您可以在Angular 文档中找到有关辅助路线导航的更多信息

URL 中有趣的部分遵循...：

  • 管理员是主要导航。

  • 括号围绕辅助路由。

  • 二级路由由一个出口名称（侧边栏）、一个冒号分隔符和二级路由路径（admin）组成。

推荐阅读