Создать угловой резольвер для многократного использования

Question

Я ищу способ использовать одно угловое разрешение маршрута для использования на всех моих маршрутах, но с другими параметрами:

В настоящее время у меня есть что-то вроде:

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

profileuserresol:

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

Это был бы хороший способ сделать это?если да, то как мне сделать это, чтобы сделать его наиболее эффективным?

Answer 1

отличный вопрос, заставил меня почесать голову тоже довольно долго:).

Итак, давайте углубимся в мое решение этой проблемы.

При использовании Resolver у нас есть возможность заменить распознаватель на все что угодно (функции / классы).

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

Этот фрагмент взят прямо из нг документов

Итак, в вашем случае вы можете добавить несколько дополнительных параметров в строку 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.

Вот демоверсия , которая немного сложнее, чем фрагменты ответа, которая реализует желаемый эффект.

Примечание:

Если бы у меня было от 10 до 15 возможных различных конфигураций для пользовательского распознавателя, я бы, вероятно, создал бы 10-15 распознавателей, поскольку на первый взгляд будет проще понять, что делает каждый распознаватель.

Отказ от ответственности:

Не уверен, что это лучшее решение, но я думаю, что что-то в этом роде - то, что вам нужно, если у вас возникнут какие-либо проблемы с реализацией, пожалуйста, создайте демонстрацию stackblitz / codesandbox / plunker, и я сделаю все возможное чтобы помочь вам:)