Angular ngIf 在窗口中显示模板，然后从 DOM 中移除

Question

根组件

<div class="container">
  <div class="row">
    <ng-container *ngIf="router.url !== '/login'">
      <app-navbar></app-navbar>
    </ng-container>
  </div>
  <ng4-loading-spinner></ng4-loading-spinner>
  <router-outlet></router-outlet>
  <div class="col-xs-12  col-sm-12 col-md-12">
    <ng-container *ngIf="router.url !== '/login'">
      <app-footer></app-footer>
    </ng-container>
  </div>
</div>

当我检查是否 router.url (路由器在构造函数的根组件 typescript 上注入(inject))等于 ./login然后从 DOM 中删除。但是 Angular 在加载页面后 1-2 毫秒显示此模板，然后从 DOM 中删除。但我不想看到 <app-navbar></app-navbar>和 <app-footer></app-footer> ..

Answer 1

问题在于您获取当前路线的方式。在最新版本的 Angular 中，路由器不返回简单对象。相反，它返回一个带有各种重定向事件的可观察对象。 Router 不是直接去目标 URL，而是通过指定的路径到达目标 URL。

您可以使用以下代码获取当前路线并将其存储在变量中，然后在您的模板中进行比较。

currentURL:any;

constructor(private router: Router){

   this.router.events.filter((res) => res instanceof NavigationEnd).subscribe((res) => {
      this.currentURL = this.router.url;   
   });

}

还在您的代码之上导入NavigationEnd

import { Router, NavigationEnd } from '@angular/router';

以上代码将确保您只获得整个重定向周期的最后一个(目标)URL。