在Angular 12中,Resolve守卫在重定向到其目标之前可以执行预先处理的逻辑,以确保需要的数据可用。在某些情况下,当Resolve守卫重定向到其目标时,可能会导致组件被重新加载,并且这并不是预期的行为。相反,我们希望它仅仅是让控制流在其原始组件中继续,同时确保需要的数据可用。
以下是一个示例,演示如何在Resolve守卫中实现这种行为:
import { Injectable } from '@angular/core';
import {
Resolve,
ActivatedRouteSnapshot,
RouterStateSnapshot,
Router,
} from '@angular/router';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { DataService } from './data.service';
@Injectable({
providedIn: 'root'
})
export class MyResolveGuard implements Resolve {
constructor(private dataService: DataService, private router: Router) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
const id = route.paramMap.get('id');
return this.dataService.getData(id).pipe(
take(1),
map((data: any) => {
if (!data) {
// navigate to error page
this.router.navigate(['/error']);
return null;
} else {
return data;
}
})
);
}
}
在上面的代码中,我们首先获得了路由参数中的'id',然后使用数据服务从远程服务器中获取数据。
接下来,我们使用'take(1)'确保只获取一次数据,然后使用'map'操作符将数据转换为我们想要的格式。 如果数据不存在,我们将重定向到错误页面。
当Resolve守卫执行完毕后,控制流会返回到其原始组件,并确保