Pesquisa de site

typescript - Angular 2: passar um valor para a resolução de dados da rota

Estou tentando escrever um serviço DataResolver que permitirá ao roteador do Angular 2 pré-carregar dados antes de inicializar meu componente.

O resolvedor precisa chamar diferentes endpoints de API para obter dados apropriados para a rota que está sendo carregada. Em vez de ter um resolvedor para cada um dos meus muitos componentes, estou construindo um resolvedor genérico. Assim, gostaria de passar entradas personalizadas na definição da rota que apontem para o endpoint correto. Por exemplo, considere estas rotas:

app.rotas.ts

appRoutes = [
  {
     path: 'project/:id',
     component: ProjectComponent,
     resolve: { data: DataResolver }
  },
  {
     path: 'store/:id',
     component: StoreComponent,
     resolve: { data: DataResolver }
  }
]

Na primeira instância, o resolvedor precisará chamar /path/to/resource1/id. No segundo caso, /path/to/resource2/id. Idealmente, eu passaria o endpoint como um argumento na definição da rota, que então estaria disponível no construtor do DataResolver.

Isso pode ser feito com uma classe resolutora genérica?

Angular 2.0.1 escrito em Typescript 2.0.3

Resposta #1

Eu não sei sobre torná-lo disponível no construtor, sem usar DI. Mas se você quiser que ele esteja disponível no método resolve, você poderia simplesmente adicionar uma propriedade data na definição da rota, e isso a tornaria disponível para o ActivatedRouteSnapshot

{
  path: 'project/:id',
  component: ProjectComponent,
  resolve: { data: DataResolver },
  data: { path: 'project/:id' }
}

class DataResolve implements Resolve<string> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return route.data['path'];
  }
}

Resposta #2

Esta resposta resolveu meu problema, mas eu também precisava que isso fosse aplicado caso a rota tenha múltiplos resolvers.

ex.

   {
    path: 'transactions/showcase/edit/:id',
    component: ClientsTransactionsFormComponent,
    resolve: {
      clients: Resolver,
      clientTransaction: Resolver,
      clientTransactionTypes: Resolver
    },

Nesse caso, resolvi meu problema passando um array em data.

data: ['Clients/GetAll', 'ClientTransactions/GetByID/', 'ClientTransactionTypes/GetAll']

e também modifiquei meu resolvedor assim..

resolve(route: ActivatedRouteSnapshot) {
    let row = [];
    let id = "";

    Object.keys(route.data).forEach(e => {
      row.push(route.data[e]);
    })

    let path: string = row[0];
    delete row[0];

    route.data = row;

    if (path.lastIndexOf('/') == path.length - 1) {
      id = route.params['id'];
    }

    return this._httpService.httpGet(this.baseUrl + path + id);
  }

Espero que ajude alguém.

Artigos relacionados