Question

in this post他们正在配置辅助路由，但不在顶层。我想配置相反的，即顶层的多条路由。我的主要目标是在正常的应用程序页面上显示完整的叠加层（登录页面）。

想象一下，我有以下html：

<div class="wrapper" *ngIf="mainRouterOutlet">
    <div header></div>
    <div sidebar></div>
    <div class="content-wrapper">
        <router-outlet></router-outlet>
    </div>
    <div footer></div>
</div>
<div *ngIf="!mainRouterOutlet">
<router-outlet name="outside"></router-outlet>
</div>

是否可以拥有路线＆＃39; / login＆＃39;使用outside路由器插座并忽略默认路由器？是否可以知道哪个路由器处于活动状态，因此我可以使用ngIf指令隐藏wrapper类，并且只有outside路由器插座处于活动状态。

Answer 1

你可以使用命名的outlet-router。但你必须考虑这个

模板可能只包含一个未命名的模板。路由器支持多个命名出口，这是我们将来要介绍的功能。

除此之外，您现在可以开始使用它，但请记住它已部分实现

    { path: 'site1', component: Site1Component },
    { path: 'site2', component: Site2Component, outlet: 'outlet1' },
    { path: 'site3', component: Site3Component, outlet: 'outlet2' }


<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>

Answer 2

使用*ngIf时，它会完全隐藏router-outlet与DOM。我得到了

错误：未捕获（在承诺中）：错误：无法找到主要插座加载'...组件'

使用[hidden]时，它只会设置元素的可见性，以便路由器仍能正常运行。

最后我使用了这个html：

<div class="wrapper" [hidden]="isLogin">
    <div header></div>
    <div sidebar></div>
    <div class="content-wrapper">
        <router-outlet></router-outlet>
    </div>
    <div footer></div>
</div>
<div [hidden]="!isLogin">
    <router-outlet name="outside"></router-outlet>
</div>

和正常的路由器配置：

const appRoutes: Routes = [
    { path: 'success',  component: SuccessComponent }, // using the default router-outlet
    { path: 'login', component: LoginComponent, outlet: 'outside' }, // using the outside router-outlet
];

只需切换isLogin属性，我就能够正确隐藏正常的应用程序布局，并向用户显示一个完整的登录屏幕（当还没有登录时）。

顶层有多条辅助路线

2 个答案: