如何在Angular（2+）中即时更改活动的主路由器出口？

Question

我有一个登录系统（okta），该系统授权使用重定向，因此我的顶级组件需要路由器插座，以便登录后可以正确处理服务器重定向。它重定向到localhost：4200 / callback等。< / p>

我还使用了商业模板（PrimeNg），该模板的布局中嵌入了一个嵌入式路由器插座。

因此，当我未登录时，我想使用一个路由器插座，而当我登录时，我希望它切换到另一个路由器插座，但是当它们处于活动状态时，两者都需要充当它们的主要插座。

这是测试“ app.component.html”中的代码，因此您可以看到我在做什么。我正在使用* ngIf切换路由器插座。

<div *ngIf="isLoggedIn">
    <button (click)="logout()"> Logout </button>
    <button routerLink="/protected"> Protected </button>
    <router-outlet></router-outlet>
</div>
<div *ngIf="!isLoggedIn">
    <button (click)="login()"> Login </button>
    <router-outlet></router-outlet>
</div>

这是一种流行的方式，但是路由器插座未使用导航组件进行更新。 URL正在更新，但内容未加载，就好像路由器出口已“断开连接”一样。