时间戳

首页 > 解决方案 > Angular 10 设置路由更改的可见性

angular - Angular 10 设置路由更改的可见性

问题描述

我有一个 Angular 应用程序，我正在尝试根据路线更改导航组件上的可用选项。我有这个工作使用这样的东西：

*ngIf="router.url.split('?')[0].split('#')[0] === '/home'"

但是，我正在进行一些更新，并且逻辑有点复杂，所以我宁愿不在 HTML 中那样做。我尝试订阅路由器事件并设置属性，但它似乎不起作用。这是我的组件的初始化方法：

  ngOnInit() {
    this.scroller.setOffset([0, 98]);
    this.authService.UserIsAdmin.subscribe(admin => this.UserIsAdministrator = admin);

    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd || event instanceof NavigationStart))
      .subscribe((e: NavigationEnd) => {
        const isHome = e.url.split('?')[0].split('#')[0] === '/home';
        this.ShowStandardItems = isHome;
        this.ShowAdminItems = this.UserIsAdministrator && (isHome || Constants.AdminRoutes.indexOf(e.url) !== -1);
        this.ShowHome = this.ShowAdminItems && !isHome;
        console.log(`${this.ShowStandardItems}/${this.ShowHome}/${this.ShowAdminItems}`);
      });
  }

以及 html 中的示例绑定：

  <a routerLink="/customer-management" [class.currentPage]="router.url === '/customer-management'"
     *ngIf="ShowAdminItems">
    CUSTOMERS
  </a>

最后是 ts 文件中的字段定义：

public ShowStandardItems = false;

最后我有控制台登录，我可以看到它正确设置了这些属性并点击了事件处理程序，但我的 UI 上没有显示任何内容，没有任何项目可见。如果我将它们的默认值更改为 true，那么即使它们不应该出现，它们也会显示出来，所以它只是没有根据这些属性更新 UI。

我也尝试过只NavigationEnd订阅，在构造函数中订阅而不是订阅ngOnInit，但都没有任何区别。

真正奇怪的是，如果我强迫某些人总是打开，然后从那里导航，它会突然开始工作。好像第一个不接，然后就接了...

我还应该提到，这个主页首先会登录，然后使用路由器导航到主页。我已经尝试过两者this.router.navigate()并this.router.navigateByUrl()进行导航，但没有任何区别。

我该如何进行这项工作？

标签： angular

解决方案

推荐阅读