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

Answer 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。