Angular2/4 changeDectorRef не работает

Question

У меня есть компонент Navbar, внутри его ngOnInit Функция, которую я проверил, если пользователь вошел в систему или нет, если пользователь вошел в систему, то я меняю isAuthorized по умолчанию, и по умолчанию falseтогда я проверю с *ngIf="isAuthorized"в моем меню lis. Теперь, когда пользователь не вошел в систему, некоторые из моих пунктов меню не созданы, и когда пользователь нажал на кнопку "Мне нравится пост", я установил флажок, чтобы показать модальный логин, если пользователь не вошел в систему. После того, как пользователь вошел в систему, я могу менять isAuthorized из navbarComponent от false в true, но мой компонент navbar не может обнаружить изменения и создать другие меню. Внутри функции входа у меня есть:this.navbar.refresh();после того, как я установил токен и внутри компонента navbar, у меня есть функция обновления:

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

    }, 10000);
  }

Главное, что я хочу, это предотвратить перезагрузку, когда пользователь вошел в систему с помощью модального режима, и показать другие пункты меню.

Answer 1

Обнаружение изменений не ваша проблема, так как ngOnInit вызывается только один раз, инициируя navbarComponent..

очень подходящее решение, которое я использую, чтобы определить Subject<boolean> isLoggedIn и в navbarComponent вы подписываетесь на это в ngOnInit

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

когда пользователь входит в систему, вы нажимаете значение true лайк

 this.isLoggedIn.next(true);

подписка будет автоматически срабатывать каждый раз isLoggedIn затем меняется isAuthorized изменить также

вот хороший пример инкапсуляции этого в сервисе

Дополнительный совет

используйте localStorage для хранения токена, чтобы пользователю не нужно было вводить свои кредитные данные при каждом обновлении.

Answer 2

Ваша проблема связана с поддержанием состояния приложения. Мы можем использовать 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()

Надеюсь, это поможет.

Для комплексного управления состоянием, checkout @ ngrx / platform