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

问题描述

我需要根据来自服务器的一些布尔配置来保护 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);
        });
    }

解决方法

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

改为使用 Resolver。

---

什么是解析器？

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

它还允许您在路由到组件之前处理错误，渲染出现错误的组件毫无意义，因此它还可用于提高性能。

---

示例：

以下是其工作原理的简单设置：

首先创建一个Resolver服务（非常类似于一个guard）

@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)
    });
}