时间戳

首页 > 解决方案 > 路由器事件在页面刷新时使某些功能失败

javascript - 路由器事件在页面刷新时使某些功能失败

问题描述

我想在除主页之外的所有页面中显示 Hamberger（菜单图标）。代码是：

constructor( private router: Router){
    this.router.events
       .subscribe((event) => {    
    let _url = window.location.href, urlArr: any;
    console.log(_url);
    urlArr = _url.split('/').indexOf('home');
    this._showHamburger = (urlArr < 0) ? true : false;
  });
}

如果我们从任何页面导航到当前页面，上面的代码可以正常工作（看来我们必须从某个地方导航）。但在页面刷新时，上述功能失败。有什么需要补充的吗？？

标签： javascriptangularangular-router

解决方案

更好的是使用该ActivatedRoute服务：

constructor(private route: ActivatedRoute) {
  route.url.pipe(
    map((urls) => urls.every((url) => !url.path.includes('home'))
  ).subscribe((show: boolean) => this._showHamburger = show);
}

更好的是在没有订阅的情况下制作它并async在组件中使用管道。这会处理任何需要的取消订阅：

readonly showHamburger: Observable<boolean>;

constructor(private route: ActivatedRoute) {
  this.showHamburger = route.url.pipe(
    map((urls) => urls.every((url) => !url.path.includes('home'))
  );
}

然后你可以像这样制作模板：

<div *ngIf="showHamburger | async" class="hamburger">I'm a hamburger</div>

推荐阅读