路由器插座和gt；周围的角度条件div容器； [英] Angular - conditional div container around <router-outlet>

问题描述

在我的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]时，视图不会更新。但是，如果我重新加载屏幕，它就可以工作。问题在于app.component.html中<router-outlet>的条件呈现，我通过删除条件进行了检查，它运行正常。

有人能帮我了解这里发生了什么吗？如果可能，如何在不使用子路由的情况下修复此问题。

推荐答案

您可以尝试此解决方案。

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

这篇关于路由器插座和gt；周围的角度条件div容器；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！