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

【问题标题】：Angular - conditional div container around <router-outlet>Angular - <router-outlet> 周围的条件 div 容器
【发布时间】：2019-07-24 02:41:46
【问题描述】：

在我的 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> 的条件渲染，我通过删除条件检查了这一点，它工作得很好。

有人可以帮助我了解这里发生了什么，以及如果可能的话如何在不使用子路由的情况下解决这个问题。

【问题讨论】：

你能在 stackblitz.com 上创建一个演示代码吗？这将帮助我了解您要达到的目标。也许我们可以提出更好的实施方式。
您可以尝试使用命名路由器出口一进行身份验证，而不是对stackoverflow.com/questions/38038001/… 进行身份验证
这会帮助你stackoverflow.com/questions/44699469/…
谢谢@yurzui，该链接有帮助。解决方案是使用 if else 使用 ng-template 并再次开始工作。我使用的第一个 div <div *ngIf="'authenticate' !== this.currentUrl else authenticate" id="wrapper"> 和第二个替换为 <ng-template #authenticate> 并且它没有任何问题。
那是因为 Angular 只识别第一个 router-outlet

标签： angular angular7

【解决方案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>

【讨论】：

【解决方案2】：

Angular 提供了一个指令 [routerLinkActive]，如果路由的特定部分包含在 url 中，它将作为输入的类数组。

用法

app.component.html

<div class="main-container" [routerLinkActive]="['app-active-class']">
  <router-outlet></router-outlet>
</div>

pages.component.html

<div class="page-category">
  <a [routerLink]="1" [routerLinkActive]="['page-category-active-class']">Num_1</a>
  <a [routerLink]="2" [routerLinkActive]="['page-category-active-class']">Num_2</a>
</div>
<div class="page-view">
  <router-outlet></router-outlet>
</div>

page.component.html

<div class="page-num">
  {{ page_num }}
</div>

page.component.ts

import { ActivatedRoute } from "@angular/router";

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  page_num = this.route.snapshot.paramMap.get("page_num")
}

app-routing.module.ts

...
{ path: "page", component: PagesComponent },
{ path: "page/:page_num", component: PageComponent },
...

【讨论】：