Angular - <router-outlet> 周围的条件 div 容器

Question

在我的 app.component.html 中，我想根据当前 url 呈现某些 div 容器。例如

1. 如果当前 URL 是身份验证，则呈现以下内容

<div *ngIf="'authenticate' === this.currentUrl">
    <router-outlet></router-outlet>
</div>

2. 如果当前 URL 未通过身份验证，则呈现以下内容

<div *ngIf="'authenticate' !== this.currentUrl" id="wrapper">
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row extranet-outlet-wrapper">
                        <router-outlet></router-outlet>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我没有使用任何子路由。这是因为，我只想要一个不同的布局来验证组件，其余的保持不变。

这在首次加载时有效，但是当我单击任何[routerLink]视图时，视图不会更新。但是，如果我重新加载屏幕，它就可以工作。问题在于<router-outlet>in的条件渲染app.component.html，我通过删除条件来检查它，它工作得很好。

有人可以帮助我了解这里发生的事情以及如何在不使用子路由的情况下解决此问题。

Answer 1

你可以试试这个解决方案。

<ng-container
  *ngIf="'authenticate' !== this.currentUrl; then notauthenticated; else authenticate">
</ng-container>

<ng-template #notauthenticated>
  <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row extranet-outlet-wrapper">
                        <router-outlet></router-outlet>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template #authenticate>
  <router-outlet></router-outlet>
</ng-template>