javascript - 创建一个 Angular 解析器以用于多种用途

我正在寻找一种方法来使用一条 Angular 路线，以解决在我的所有路线上使用的问题，但是要使用不同的参数:

目前，我有类似的东西:

   {
        path: 'user/:any',
        component: UserprofileComponent,
        resolve: { ProfiledUser: UserprofileResolver }
      },

profileuser解决:

 resolve(route: ActivatedRouteSnapshot) {
    return this.GlobalService.Get('/userprofile/admin');
  }

我实际上是在为解析器本身寻找一种使用Get中GlobalService函数正在使用的参数的方法。

我以前做了一些理论上可行的事情:

  path: 'family/panel',
        component: FamilyCoreComponent,
        canActivate: [PermissionGuardService],
        data: {roles: [0]},

在哪里可以激活权限保护:

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean>|boolean {

    var requirementRole = next.data.roles[0];

所以我的问题是，我应该像对权限保护员那样使用解析器的原理吗？

例如类似:

  {
    path: 'user/:any',
    component: UserprofileComponent,
    resolve: { ProfiledUser: UserprofileResolver }
    data: {load: 'userprofile/admin'},
  },

这会是一个好方法吗？如果是这样，我将如何使其变得最高效？

最佳答案

一个好问题，也让我挠了很长时间:)。

因此，让我们深入研究该问题的解决方案。

使用Resolver时，我们可以用我们喜欢的任何东西(函数/类)替换解析器。

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamComponent,
        resolve: {
          team: 'teamResolver'
        }
      }
    ])
  ],
  providers: [
    {
      provide: 'teamResolver',
      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => 'team'
    }
  ]
})

该代码段直接来自ng Docs

因此，根据您的情况，您可以在useValue行中添加一些其他参数，如下所示

useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
  new ResolverWithParamsResolver(
          route,
          state,
          "customLink"
      ).resolve()

还有您的ResolverWithParamsResolver，类似于以下代码片段

export interface ResolverWithParamModel<T> {
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
    linkParam: string
  ): Observable<T> | Promise<T> | T;
}
// Custom resolver
@Injectable()
export class ResolverWithParamsResolver implements ResolverWithParamModel<any> {
  constructor(
    private route: ActivatedRouteSnapshot,
    private state: RouterStateSnapshot,
    private linkParam: string
  ) {}

  resolve(): Observable<any> | Promise<any> | any {
    return of(this.linkParam)
  }
}

因此，现在您将可以访问自己的linkParam。

这是demo，它比答案中的摘录要复杂一些，可以实现所需的效果。

笔记:

如果自定义解析器有10到15种可能的不同配置，则我可能会创建10-15个解析器，因为乍一看，每个解析器的作用将更加容易理解。

免责声明:

不确定这是否是最好的解决方案，但是我认为您希望实现这些目标，如果在实现过程中遇到任何麻烦，请创建一个stackblitz/codesandbox/plunker演示，我会尽力为您提供帮助:)

关于javascript - 创建一个 Angular 解析器以用于多种用途，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55446725/