Góc 2: chuyển giá trị cho dữ liệu tuyến đường giải quyết

Question

Tôi đang cố gắng viết dịch vụ DataResolver cho phép bộ định tuyến Angular 2 tải trước dữ liệu trước khi khởi tạo thành phần của tôi.

Trình phân giải cần gọi các điểm cuối API khác nhau để tìm nạp dữ liệu phù hợp với tuyến đang được tải. Thay vì có trình phân giải cho từng thành phần của tôi, tôi đang xây dựng một trình phân giải chung. Vì vậy, tôi muốn chuyển đầu vào tùy chỉnh trong định nghĩa tuyến đường trỏ tới điểm cuối chính xác. Ví dụ, hãy xem xét các đường bay:

app.routes.ts

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

Trong trường hợp đầu tiên, resolver sẽ cần phải gọi /path/to/resource1/id. Trong trường hợp thứ hai, /path/to/resource2/id. Lý tưởng nhất, tôi sẽ vượt qua điểm cuối làm đối số trong định nghĩa tuyến đường mà sau đó sẽ có sẵn trong hàm tạo DataResolver.

Điều này có thể được thực hiện với lớp phân giải chung không?

Angular 2.0.1 viết bằng Typescript 2.0.3

Answer 1

Tôi không biết về làm cho nó có sẵn trong các nhà xây dựng, mà không sử dụng DI. Nhưng nếu bạn muốn nó có sẵn trong phương pháp resolve, bạn chỉ có thể thêm một tài sản data trong định nghĩa đường, và điều này sẽ làm cho nó có sẵn cho các 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

Câu trả lời này giải quyết vấn đề của tôi, nhưng tôi cũng cần thiết này được áp dụng trong trường hợp tuyến đường có nhiều trình phân giải.

ví dụ:

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

Trong trường hợp đó, tôi đã giải quyết được vấn đề của mình bằng cách truyền mảng dữ liệu.

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

và cũng biến đổi phân giải của tôi như thế này ..

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

hy vọng nó sẽ giúp bất cứ ai.