Question

我有一段角度的代码，我想用它来实现：

实时观察窗口的大小
一旦触发，我要检查当前网址
根据当前网址，更改属性值以使其可以从模板中读取

这是我的代码片段：

showDrawer: Boolean = false;
showUserMenu: Boolean = false;

constructor(private breakpointObserver: BreakpointObserver,
  private route: ActivatedRoute,
  private authService: AuthService,
  private router: Router) {
}

isHandset$: Observable<boolean> = 
 this.breakpointObserver.observe(Breakpoints.Handset)
 .pipe(
  map(result => {
    console.log('isH', result);
    this.router.events
      .subscribe((event) => {
        console.log('second', result.matches);
        if (event instanceof NavigationEnd) {
          console.log('second', result.matches);
          switch (event.url) {
            case '/login':
              this.showDrawer = false;
              this.showUserMenu = false;
              break;
            case '/':
            case '/home':
              this.showDrawer = false;
              this.showUserMenu = !result.matches;
              break;
            default:
              this.showDrawer = result.matches;
              this.showUserMenu = !result.matches;
          }
          this.currentUrlFirstSegment = event.url.split('/')[1];
          this.selectSectionThemeByUrlSegment();
        }
      }

      );

    return result.matches;

  })
);

在前端，我使用类似的东西

(isHandset$ | async )

和

*ngIf="showDrawer"

（至少对我来说）奇怪的是，我可以在页面加载时完成所有事情，但是在调整窗口大小之后，只会连续发生第一件事，即the console.log('isH', result);总是被触发，而只是第一次之后的代码。

这是因为当击中return result.matches时，路由器订阅被杀死了吗？这是正确的方法吗？

谢谢！

将breakpointObserver绑定到Router.events

0 个答案: