Как правильно выйти из системы и перемещаться с помощью Firebase и отложенной загрузки

Question

Как правильно выйти из системы и перейти к основному представлению с помощью Firebase AuthState?

У меня есть простая компоновка контента, которая состоит из заголовка, маршрутизатора-выхода и нижнего колонтитула.Содержимое верхнего и нижнего колонтитула изменяется в зависимости от того, вошел ли пользователь в систему. В маршрутизации я использую ленивую загрузку (и импортирую ее в AppModule).Для авторизации пользователей я использую firebase.В конструкторе AuthService я подписываюсь на AuthStat.

Упрощенный макет содержимого:

<app-heder [user]="user"></app-header>  
<router-outlet></router-outlet>
<app-footer [user]="user"></app-footer>

Маршрутизация:

const appRoutes: Routes = [
    {
       path: 'dashboard',
       loadChildren: './modules/dashboard/dashboard.module#DashboardModule'
    },
    {
       path: 'settings',
       loadChildren: './modules/app-settings/app-settings.module#AppSettingsModule'
    },
    {
       path: 'about',
       loadChildren: './modules/about/about.module#AboutModule'
    },
    {path: '**', redirectTo: '/dashboard'},
    {path: '', redirectTo: '/dashboard', pathMatch: 'full'}
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, {
            preloadingStrategy: PreloadAllModules,
            scrollPositionRestoration: 'enabled',
            anchorScrolling: 'enabled'
        })
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

Служба аутентификации:

@Injectable({
  providedIn: 'root'
})
export class AuthService {

    constructor(private afAuth: AngularFireAuth,
                private router: Router) {
        this.afAuth.authState.subscribe((auth) => this._user = auth);
    }

    get currentUserObservable(): Observable<any> {
        return this.afAuth.authState;
    }

    public signOut(): void {
        this.afAuth.auth.signOut();
        this.router.navigate(['dashboard']);
    }
}

Метод, используемый для получения пользователя в app.component (вызывается в ngOnInit):

private getUser(): void {
    this.auth.currentUserObservable.subscribe(
        res => this.user = res,
        error => console.log(error)
      );
}

Что работает как следует:

1. Пользователь посещает веб-сайт (маршрут: «панель инструментов»)
2. Пользователь вошел в систему
3. Пользователь вышел из системы (все еще находясь на «панели инструментов»)

Все работает нормально.Изменены переменные 'user', изменились представления в верхнем и нижнем колонтитулах.

Что не работает так, как должно:

1. Пользователь заходит на сайт (маршрут: «панель инструментов»)
2. Пользователь вошел в систему
3. Пользователь изменил маршрут, например, на «настройки»
4. Пользователь вышел из системы (затем автоматически перейдет к «панели управления»)

На самом деле пользователь вышел из системы, навигация работает, но вид в верхнем и нижнем колонтитулах не изменился.Это связано с тем, что переменная 'user' (в которой я подписан) не была обновлена.Когда я удаляю навигацию по маршруту из метода signOut (), переменная 'user' меняется каждый раз, как и должна.

Похоже, что навигация по «блокам» каким-то образом меняет значение «пользователя».Может быть, это связано с моей ленивой структурой загрузки?

Я не могу понять, где проблема.Пожалуйста, дайте мне несколько советов.