angular - 除非在 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);

  }

}

为什么登录后组件没有渲染并且需要手动重新加载才能渲染它的问题是什么？

标签： angularangular6angular7

Answer 1

我认为这里的问题可能是由于 Angular 组件生命周期，订阅永远不会解决，因为组件一开始没有显示，请在构造函数中包含以下内容：

 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()