Angular - условный контейнер div вокруг

Question

В моем app.component.html я хочу отобразить определенные контейнеры div на основе текущего URL.Например

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

Answer 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 },
...