Angular 2: einen Wert an die Routendaten übergeben resolve

Question

Ich versuche einen DataResolver Dienst zu schreiben, der es dem Angular 2 Router ermöglicht, Daten vor der Initialisierung meiner Komponente vorzuladen.

Der Resolver muss verschiedene API-Endpunkte aufrufen, um Daten für die zu ladende Route abzurufen. Anstatt einen Resolver für jede meiner vielen Komponenten zu haben, erstelle ich einen generischen Resolver. Daher möchte ich benutzerdefinierte Eingaben in der Routendefinition übergeben, die auf den richtigen Endpunkt verweisen. Betrachten wir zum Beispiel diese Routen:

app.routes.ts

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

Im ersten Fall müssen die Resolver /path/to/resource1/id nennen. Im zweiten Fall /path/to/resource2/id. Idealerweise würde ich den Endpunkt als Argument in der Routendefinition übergeben, die dann im Konstruktor DataResolver verfügbar wäre.

Kann dies mit einer generischen Resolver-Klasse durchgeführt werden?

Angular 2.0.1 in Typescript 2.0.3

Answer 1

geschrieben Ich weiß nicht, über sie im Konstruktor verfügbar machen, ohne DI zu verwenden. Aber wenn man es in der resolve Methode zur Verfügung möchten, können Sie nur eine data Eigenschaft in der Routendefinition hinzufügen, und dies würde es dem Diese Antwort mein Problem gelöst 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']; 
    } 
} 

Answer 2

verfügbar machen, aber ich habe auch dies erforderlich angewendet werden, wenn die Route mehrere Resolver hat.

z.

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

In diesem Fall habe ich mein Problem gelöst, indem Sie ein Array in Daten übergeben.

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

und modifiziert auch mein Resolver wie folgt ..

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); 
    } 

hoffen, dass es jemand hilft.