Angular2/4 changeDectorRef 不起作用答案

【问题标题】：Angular2/4 changeDectorRef not workingAngular2/4 changeDectorRef 不起作用
【发布时间】：2018-09-03 13:55:40
【问题描述】：

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

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

    }, 10000);
  }

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

【问题讨论】：

你在角区吗？
你究竟为什么要分离变更检测器？
@TomaszKula 只是试图解决这个问题，其他地方建议这个，我也尝试过简单的detectChanges()
@yurzui 不明白你的问题。
stackoverflow.com/questions/44391696/…

标签： angular data-binding angular-changedetection

【解决方案1】：

您的问题与维护应用程序的状态有关。我们可以使用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

【讨论】：

【解决方案2】：

更改检测不是您的问题，因为 ngOnInit 仅在启动 navbarComponent 时被调用一次..

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

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

当用户登录时你推送值truelike

 this.isLoggedIn.next(true);

订阅将在每次isLoggedIn 更改然后isAuthorized 更改时自动触发

here 是将其封装在服务中的一个很好的例子

其他建议

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

【讨论】：