Angular ngIf 在 window 上显示模板，然后从 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（在构造函数的根组件打字稿上注入路由器）是否等于 ./login 时，然后从 DOM 中删除。但是 angular 在加载页面后 1-2 毫秒显示此模板，然后从 DOM 中删除。但我不想看到 <app-navbar></app-navbar> 和 <app-footer></app-footer> ..

Answer 1

问题在于您获取当前路线的方式。在最新版本 angular 中，路由器没有 return 简单对象。相反，它 return 是一个具有各种重定向事件的可观察对象。路由器不直接到达目标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。

Angular ngIf 在 window 上显示模板，然后从 DOM 中删除

Angular ngIf shows template on window, then removes from DOM

angular-ng-if

angular

angular6