Angular ngIf 在窗口上显示模板，然后从 DOM 中删除答案

【问题标题】：Angular ngIf shows template on window, then removes from DOMAngular ngIf 在窗口上显示模板，然后从 DOM 中删除
【发布时间】：2018-08-24 12:43:38
【问题描述】：

根组件

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

【问题讨论】：

也许你的代码中有一些东西为你做这个检查并将结果分配给将在 ngIf 中使用的变量，但默认它是 false，这样它只会在有什么改变它时显示真的。在没有看到您的其他代码/路线的情况下，这只是关于如何提供帮助的想法。
试试*ngIf="router?.url? && router.url !== '/login'" ?
感谢您的回答。

标签： angular angular6 angular-ng-if

【解决方案1】：

问题在于您获取当前路线的方式。在最新版本的 Angular 中，Router 不返回简单对象。相反，它返回一个带有各种重定向事件的 observable。路由器不直接到达目标 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。

【讨论】：

我会在模板中添加这个，使用*ngIf="currentURL && currentURL !== '/login'"，否则，很好的答案。
感谢您的回答.. Angular6 上的正确语法是这样... this.router.events.pipe( filter(res => res instanceof NavigationEnd) ).subscribe(() => { this.currentURL = this.router.url; });