在Angular 9中,可以使用守卫(guard)来保护特定的路由,并在特定条件满足前等待。
首先,在你的路由模块中定义一个守卫,例如AuthGuard
:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree {
// 在这里添加你的条件判断逻辑
// 例如,等待一个异步操作完成后再继续导航
return new Promise((resolve, reject) => {
// 在这里添加你的异步操作逻辑
// 当条件满足时,调用resolve(true);否则,调用resolve(false)
// 例如:
setTimeout(() => {
const condition = true; // 假设需要满足的条件
if (condition) {
resolve(true); // 条件满足,继续导航
} else {
resolve(false); // 条件不满足,导航被拦截
}
}, 2000); // 模拟一个异步操作,例如API请求或者定时器
});
}
}
然后,在你的路由配置中使用这个守卫:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{
path: 'protected',
canActivate: [AuthGuard], // 使用AuthGuard作为守卫
loadChildren: () => import('./protected/protected.module').then(m => m.ProtectedModule)
},
// 其他路由配置...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在这个例子中,AuthGuard
守卫会等待2秒钟,然后根据条件的满足与否决定是否继续导航。你可以根据自己的需求,修改守卫中的条件判断逻辑和异步操作逻辑。
请注意,守卫可以用于任何需要对导航进行条件判断或拦截的地方,不仅仅局限于canActivate
。你还可以使用canActivateChild
、canLoad
等守卫来保护子路由或惰性加载的模块。