为多种用途创建角度解析器

Question

我正在寻找一种方法来使用一个角度路线来解决我的所有路线，但使用不同的参数：

目前，我有类似的东西：

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

profileuser 解析：

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

事实上，我正在寻找一种方法来使用来自 GlobalService 的 Get 函数正在使用的参数，用于解析器本身。

我之前做过一些理论上可行的东西：

  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'},
  },

这是一个好方法吗？如果是这样，我将如何做到这一点最有效？

Answer 1

好问题，也让我摸不着头脑:)。

那么让我们深入研究一下我解决这个问题的方法吧。

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

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

这个 sn-p 直接来自ng Docs

所以在你的情况下，你可以在useValue 行中添加一些额外的参数，像这样

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

你的ResolverWithParamsResolver你可能有，类似于下面的代码sn-p

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，比答案中的sn-ps稍微复杂一点，实现了想要的效果。

注意：

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

免责声明：

不确定这是否是最好的解决方案，但我认为这些方面的东西是您想要的，如果您在实施中遇到任何问题，请创建一个 stackblitz/codesandbox/plunker 演示，我会尽力而为帮助你:)