Обнаружение угловых изменений не работает после AngularFireAuth signInWithPopup

Question

Я вызываю AngularFireAuth signInWithPopup, как показано ниже, и в случае его успеха направляется к другому компоненту, но при этом изменения не обнаруживаются.

Найти полный код здесь https://stackblitz.com/edit/cdissue

На первом экране есть две кнопки - «Перейти к comp2 без входа в систему» ​​и «Перейти к comp2 после входа в систему» Сначала нажмите на кнопку «Перейти к comp2 без входа в систему», чтобы перейти на второй экран, где есть две кнопки и счетный текст.

Нажмите на кнопку увеличения, чтобы увеличить счет. Это рабочий сценарий.

Нажмите «Вернуться назад», чтобы вернуться на первый экран, затем нажмите кнопку «Перейти к comp2 после входа в систему», которая покажет всплывающее окно для входа через gmail. После входа он автоматически направится на второй экран. Вы можете использовать учетные данные cdissue@gmail.com & @ngularTest для входа в систему с помощью gmail

Теперь счетчик не отображается, или нажатие на инкремент не отображает счетчик, и это сценарий ошибки

Observable.fromPromise(
      this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
    )
    .pipe(
      first(),
      map( authData => {
        this.router.navigate(['comp2'])
      })
    ).subscribe();

Answer 1

Проблема в том, что вы покидаете угловую зону после входа в систему.

Решение - запустить код внутри угловой зоны:

constructor(
    ...
    private zone: NgZone
 ) { }
...
...
 .pipe(
    first(),
    map(authData => {
      this.zone.run(() => {
        this.goToComp2();
      });
    })
  ).subscribe();

Разветвленный стек-блиц