UPD。解决了。我正在使用 2 个服务实例,但它导致了问题
我被 canLoad 守卫困住了。当我按下组件中的按钮时,我想更改服务中的错误值并让我的 Guard 加载模块。但是 guard 只接收到一个错误的值。我怎样才能让它工作,看看我什么时候更新服务价值?看起来它看不到值何时更改并在我更新它之前触发
这是我的 AuthGuard
import { Injectable } from '@angular/core';
import { CanLoad } from '@angular/router';
import { AuthenticationService } from '../services/auth.service';
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanLoad {
constructor(private authService: AuthenticationService) {}
canLoad(): boolean {
if (this.authService.isLogged()) {
return true;
} else {
return false;
}
}
}
我的身份验证服务
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
private isUserLoggedIn = new BehaviorSubject(false);
isLogged() {
console.log(this.isUserLoggedIn.value); // <--- FALSE
return this.isUserLoggedIn.value;
}
login() {
this.isUserLoggedIn.next(true);
console.log(this.isUserLoggedIn.value); // <--- TRUE
}
}
路由:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'login'
},
{
path: 'dashboard',
loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule),
canLoad: [AuthGuard]
},
{
path: 'login',
loadChildren: () => import('./modules/login/login.module').then(m => m.LoginModule)
},
{
path: '**',
redirectTo: 'dashboard'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
主模块
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './guards/auth.guard';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
登录模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { NzFormModule } from 'ng-zorro-antd/form';
import { LoginRoutingModule } from './login-routing.module';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AuthenticationService } from 'src/app/services/auth.service';
@NgModule({
declarations: [
LoginComponent
],
imports: [
CommonModule,
NzFormModule,
LoginRoutingModule,
NzInputModule,
NzButtonModule
],
providers: [
AuthenticationService
]
})
export class LoginModule { }
登录路由模块
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginComponent } from './login.component';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: LoginComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LoginRoutingModule {}
按钮
<button (click)="submitForm()">pressme</button>
submitForm() {
this.authService.login();
this.router.navigate(['dashboard']);
}