如何从Angular中的Route Guards传递布尔参数

Question

我需要基于来自服务器的一些布尔配置来保护routerLinks。目前我已经写了canActivate路由保护。ActivateRoutes文件

async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<any> {
const visibility = route.data.name;
return await this.service.activateRouterLinks(visibility);
}

这是我的app.module.ts文件

{
path: 'home',
loadChildren: 'src/app/home/home.module#HomeModule',
data: {
title: 'Home', name: Names.HOME
},
canActivate: [ActivateRoutes]
},

但实际上我想要的是，我想把一个布尔值传递给这样的数据，而不是名称。

data: {
title: 'Home', state: homePageActive
},

来自我的服务班(路线警卫(。目前我正在使用地图，每次加载页面时，它都会搜索所有地图以找到名称。因此，我想一次设置一个布尔值。

这是我的服务类代码。

linkNames = new Map<string, []>();
homePageActive = false;
getConfigurations() {
this.getUIConfigurations().subscribe(
configs => {
for (const value of configs.names) {
this.linkNames.set(value.name, value.secondary_tabs);
}
mapNames();
});
}
mapNames() {
if (this.linkNames.has(Names.HOME)) {
homePageActive = true;
}
}
asyn cactivateRouterLinks(visibility) {
await this.waitSecond();
if (this.linkNames.has(visibility)) {
return true;
} else {
this.router.navigateByUrl('/page_not_found');
return false;
}
}
waitSecond() {
return new Promise(resolve => {
setTimeout(() => {
resolve('return aftersecond!');
}, 160);
});
}

Answer 1

您试图将数据从RouteGuard传递到组件，但RouteGuards仅用于保护用户是否有权访问组件。

相反，请使用Resolver。

---

什么是解析器

解析器允许您在加载组件之前执行某些操作，并将数据传递给该组件。它通常用于预取数据，以便在组件加载后立即准备好。

它还允许您在路由到组件之前处理错误，渲染错误的组件没有意义，因此它也可以用来提高性能。

---

示例：

以下是一个简单的工作设置：

首先，创建一个Resolver服务(非常类似于防护(

@Injectable()
export class YourResolver implements Resolve<ReturnedData> {
constructor(private myService: MyService) {}
resolve(route: ActivatedRouteSnapshot): Observable<ReturnedData> {
return this.myService.getData();
}
}

然后在路由器中：

{
path: '', 
component: YourComponent,
resolve: {
myData: YourResolver
}, 
},

然后你可以从你的组件访问它，如下所示：

ngOnInit() {
this.route.data
.subscribe((data) => {
console.log(data.myData)
});
}