Компонент не отображается, если не обновлен в Angular 6+

Question

После аутентификации приложение перенаправляет на панель управления.Эта панель управления имеет боковую панель, и все ссылки маршрутизатора изменяют имя пути в адресной строке, но не отображают компонент, если страница не загружается вручную.

это мой основной app.component.html код:

<div *ngIf="isLogged" class="dashboard">
    <app-navbar></app-navbar>

    <div class="container-fluid">
        <div class="row navbar-expand-md">

            <app-sidebar></app-sidebar>

            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                    <h1 class="h2">Dashboard</h1>
                </div>

                <router-outlet></router-outlet>

            </main>
        </div>
    </div>
</div>

<div *ngIf="!isLogged" class="plain-page">
    <router-outlet></router-outlet>
</div>

а это app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthguardService } from './services/authguard.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{

  title = 'App';

  isLogged: boolean = false;
  constructor (
    private router: Router,
    private authguardService: AuthguardService
  ){}

  ngOnInit(){

    // this.isLogged = this.authguardService.canActivate();

    this.authguardService.authStatus.subscribe(
      (data: boolean) => {
        this.isLogged = data;
      }
    );
  }

}

Теперь это мой router.module

import { NgModule } from '@angular/core';
import { RouterModule, Routes, CanActivate } from '@angular/router';
import { AuthguardService as Authguard } from './services/authguard.service';

import { LoginComponent } from './pages/login/login.component';
import { SignupComponent } from './pages/signup/signup.component';
import { UsersComponent } from './pages/users/users.component';
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { Google2FAComponent } from './pages/google2-fa/google2-fa.component';
import { RolesComponent } from './pages/roles/roles.component';
import { FileUploadComponent } from './pages/merchant/file-upload/file-upload.component';

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'signup',
    component: SignupComponent
  },
  { 
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'google2fa/:id',
    component: Google2FAComponent,
    canActivate: [Authguard]
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [Authguard]
  },
  {
    path: 'users',
    component: UsersComponent,
    canActivate: [Authguard]
  },
  {
    path: 'roles',
    component: RolesComponent,
    canActivate: [Authguard]
  },
  {
    path: 'file-upload',
    component: FileUploadComponent,
    canActivate: [Authguard]
  }

]

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(appRoutes, {onSameUrlNavigation: 'reload'})
  ],
  exports: [RouterModule]
})
export class RoutesModule { }

А это AuthguardService

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { TokenService } from './token.service';

import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthguardService implements CanActivate {

  private isLoggedIn = new BehaviorSubject<boolean>(this.tokenService.loggedIn());
  authStatus = this.isLoggedIn.asObservable()

  constructor(
    private router: Router,
    private tokenService: TokenService
  ) {}


  canActivate(): boolean {
    if (!this.tokenService.loggedIn()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }

  changeAuthStatus(value: boolean){

    this.isLoggedIn.next(value);

  }

}

В чем заключается проблема, почему компоненты не были отображены после входа в систему и должны быть вручную загружены для его визуализации?

Answer 1

Я думаю, что проблема здесь может заключаться в том, что из-за жизненного цикла углового компонента подозрение никогда не разрешается, потому что компонент не отображается в самом начале, пожалуйста, включите в конструктор следующее:

 export class AppComponent implements OnInit{

 title = 'App';

 isLogged: boolean = false;
 constructor (
   private router: Router,
private authguardService: AuthguardService
 ){
   this.authguardService.authStatus.subscribe(
     (data: boolean) => {
         this.isLogged = data;
        }
}

// remove the subscribe from the ngOnInit()