Question

// app.component.html
<div [ngClass]="{'gridLogged': isLogin, 'gridUnlogged': !isLogin}">

// app.component.ts
ngDoCheck() {

    // User is logged
    if (this.authenticationService.isAuthenticated() ) {
        this.isLogin = true;
    } else {
        this.isLogin = false;
    }
    console.log(this.isLogin);
}

我需要切换isLogin才能注入css类。如果用户登录或不使用isAuthenticated方法，isLogin将切换。我已将该代码段用于ngDoCheck，因为我需要在每个不同的页面中检查它，因此我认为主要的TS文件将是最佳位置。

问题是，每当我更改页面时，它将是console.log isLogin 5次左右，所以我认为这不是最好的解决方案。

每次更改当前路线时，切换isLogin布尔值的最佳解决方案是什么？感谢

Answer 1

我只是回答你的问题：我想在每次更改当前路线时切换isLogin 。

constructor(
  private router: Router
) {
  router.events.subscribe(events => {
    if (events instanceof NavigationEnd || events.constructor.name === NavigationEnd.name) {
      // Do your stuff here
    }
  });

使用此代码，您可以订阅路线更改。但路线更改涉及大量事件（您可以记录它们以查看），因此您只会对最后一个事件执行某些操作，该事件使用NavigationEnd键入。

（PS：所有进口来自@ angular / router）

在Angular 5中在主要组件上切换布尔值的最佳方法

1 个答案: