0

我有一个导航栏组件，在它的ngOnInit功能内我检查了用户是否登录，如果用户登录然后我更改isAuthorized为 true，它的默认值为false，然后我*ngIf="isAuthorized"在我的菜单中检查li。现在，当用户未登录时，我的某些菜单项未创建，并且当用户单击 post like 按钮时，如果用户未登录，我已检查以显示登录模式。用户登录后，我可以从to更改isAuthorized，但我的导航栏组件无法检测到更改并创建其他菜单。我有内部登录功能： 设置令牌后，在导航栏组件内部，我有一个刷新功能：navbarComponentfalsetruethis.navbar.refresh();

refresh() {
    this.isAuthorized = true;
    this.changeDetector.detach();
    setInterval(() => {
      this.changeDetector.reattach();
      // if (!this.changeDetector['destroyed']) {
        this.changeDetector.detectChanges();
      // }
      this.changeDetector.detach();

    }, 10000);
  }

我想要的主要是防止用户使用模式登录时重新加载，并显示其他菜单项。

4

2 回答 2

0

您的问题与维护应用程序的状态有关。我们可以使用rjxs/BehaviorSubject来保持状态，我们可以摆脱ChangeDetectorRef

// auth.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class AuthState  {
  private auth$ = new BehaviorSubject<boolean>(false);

  public login() {
    return this.auth$.next(true);
  }

  public logout() {
    this.auth$.next(false);
  }

  public isLoggedIn() {
    return this.auth$.asObservable();
  }
}

在navbar component和模板

constructor(public authState: AuthState) {
  this.authState.isLoggedIn().subscribe((isAuth) => {
    // do something
  }
}

在login component（某处）

this.authState.login()

希望这有帮助。

对于复杂的状态管理，请查看@ngrx/platform

于 2018-03-25T13:50:07.100 回答
0

更改检测不是您的问题，因为ngOnInit仅在启动navbarComponent..

我使用的一个高度候选的解决方案是定义一个Subject<boolean> isLoggedIn并且在navbarComponent你订阅它ngOnInit 

 isLoggedIn.asObservable().subscribe(newVal => isAuthorized = newVal);

当用户登录时，您会推送true类似的值

 this.isLoggedIn.next(true);

每次isLoggedIn更改时订阅都会自动触发，然后isAuthorized也会更改

这是将其封装在服务中的一个很好的示例

附加建议

使用 localStorage 来存储令牌，这样用户每次刷新时都不需要输入他的凭据。

于 2018-03-25T13:25:00.900 回答