6

我的子路由组件正在从 API 查询一些数据。目前，如果作为路由参数提供的 id 通过检查 API 返回的数据有效，我正在检查组件。

我认为这是一种不好的风格，并希望将检查放入一个警卫中，该警卫在组件被激活之前检查提供的参数是否有效。

但是，我也想节省时间和资源。这将需要两个 API 请求。因此我想知道是否有可能将数据从警卫传递到组件。我考虑过与路由参数一起传递，但canActivate只提供一个ActivatedRouteSnapshot只读的。

因此我的问题是：是否可以将数据从警卫传递到组件？或者在这种情况下是否有另一种（甚至更好的）方法来节省资源并防止多个 API 请求？

4

2 回答 2

14

我认为您正在寻找Resolver。使用解析器，您可以在组件加载之前加载路由转换的数据。设置与守卫几乎完全相同。

@Injectable()
export class YourResolver implements Resolve<YourObject> {

    constructor(private dataService: DataService) {
    }

    resolve(route: ActivatedRouteSnapshot): Observable<YourObject> {
        return this.dataService.getData().do(data=>{
           // you could potentially handle a redirect here if need be/
         });
    }
}

然后在您的路线设置中

       {
            path: 'yourComponent', component: YourComponent,
            resolve: {
                data: YourResolver
            }, outlet: 'content'
        },
于 2018-01-28T16:02:47.637 回答
2

Angulars canActivate 在您的组件之前触发。在 canActivate 中，您可以访问已激活的路由器，并使用您的 api 检查您想要的“id”或 witch 参数，并在收到您的 api 的结果后，您可以返回 true 或 false。如果你返回 false，你的控制器根本不会被触发。因此，检查用户权限的正确过程是在 canActivate 类中检查它们。不要忘记，您可以链接您的 canActivate 过滤器，并按给定顺序检查它们。

path:"doSomethingById/:id", controller: ExampleController,  canActivate: [AuthGuard, IdChek]

在上面的示例中，IdCheck 将仅在 AuthGuard 返回 true 时运行。只有当它们都返回 true 时，您的控制器才会被触发。

于 2018-01-28T16:07:35.247 回答