Question

我有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>

编辑

未命名的路由有效，而命名的路由无效。

控制台中没有错误。

Answer 1

要直接路由到两个router-outlets，您的网址应如下所示：

http://localhost:4200/admin(sidebar:admin)

如果要通过routerLink属性进行路由：

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

在stackblitz上的演示

您可以在angular docs

中找到有关辅助路线导航的更多信息

URL的有趣部分位于...：



管理员是主要导航。



括号包围着第二条路线。


次要路线由出口名称（边栏），冒号海员和次要路线路径（管理员）组成。

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

1 个答案: