时间戳

首页 > 解决方案 > 如何从 Angular 中的 Route Guards 传递布尔参数

angular - 如何从 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);
        });
    }

标签： angularasync-awaitangular-router-guardsangular-routerlinkcanactivate

解决方案

您正在尝试将数据从组件传递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)
    });
}

推荐阅读