代码之家 › 专栏 › 技术社区 › Seymur Asadov

角度ngIf在窗口上显示模板,然后从DOM中移除

angular-ng-if angular6 angular

3

Seymur Asadov · 技术社区 · 6 年前

根组件

<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上注入的路由器)等于 ./login 然后从DOM中移除。但是angular在加载页面后1-2毫秒显示这个模板,然后从DOM中删除。但我不想看到 <app-navbar></app-navbar> <app-footer></app-footer> 。。

1 回复 | 直到 6 年前

1

2

Umang Patel 6 年前

问题在于你得到当前路线的方式。在最新版本的angular中,路由器不返回简单对象。相反,它返回一个带有各种重定向事件的可观测值。路由器不直接到达目标URL,而是通过指定的路径到达目标URL。

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

currentURL:any;

constructor(private router: Router){

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

}

同时导入

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

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