路由器事件在页面刷新时无法实现某些功能

Question

我想在主页以外的所有页面中显示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;
  });
}

如果我们从任何页面导航到当前页面，上面的代码工作正常(似乎我们必须从某个地方导航(。但是在页面刷新时，上述功能失败。我需要加起来的任何事情？？

Answer 1

最好使用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>

Answer 2

我认为创建一个新组件是最好的主意

最好的方法是创建一个新组件并添加汉贝格的代码(菜单图标(

使用此创建新组件

ng g c Hamberger  

在您想要的所有页面上使用像<app-hamberger></app-hamberger>这样的选择器，并且不要在希望时添加它