Làm thế nào để có được tất cả params đường/dữ liệu

Question

Với một lộ trình cấu hình

{ 
    path: '/root/:rootId', 
    children: [{ 
     path: '/child1/:child1Id', 
     children: [{ 
      path: '/child2/:child2Id 
      component: TestComponent 
     }] 
    }] 
} 

Trong TestComponent làm thế nào tôi có thể dễ dàng nhận được tất cả params tuyến. Tôi tự hỏi nếu có cách nào dễ dàng hơn so với

let rootId = route.parent.parent.snapshot.params; 
let child1Id = route.parent.snapshot.params; 
let child2Id = route.snapshot.params; 

Điều này dường như quá dư thừa, đặc biệt nếu tôi xem thông số tuyến đường có thể quan sát thay vì truy cập thông số thông qua hình chụp tuyến đường. Phương pháp này cũng có vẻ mong manh vì nó sẽ phá vỡ Nếu tôi chuyển bất kỳ tuyến đường/tham số nào xung quanh. Im được sử dụng để ui-router góc nơi một đối tượng $ stateParams được cung cấp với tất cả các dữ liệu param dễ truy cập. Tôi có những mối quan tâm tương tự với dữ liệu được giải quyết tuyến đường dọc theo được truy cập từ một nút duy nhất trong cây tuyến đường. Bất kì sự trợ giúp nào đều được đánh giá cao. Cảm ơn trước

Answer 1

Bạn cần lặp lại các đoạn tuyến đường.

Something như

var params = []; 
var route = router.routerState.snapshot.root; 
do { 
params.push(route.params); 
route = route.firstChild; 
} while(route); 

này cung cấp cho bạn danh sách các params của mỗi đoạn đường, sau đó bạn có thể đọc các giá trị param từ họ mà bạn muốn.

Object.keys(params) có thể hoạt động để nhận tất cả tên tham số có sẵn từ phiên bản param.

Answer 2

Tôi có con đường param đầu tiên theo cách này:

console.log(this.route.snapshot.firstChild.params)

Answer 3

constructor(private route: ActivatedRoute) {} 

data$ = of(this.route).pipe(
    expand(route => of(route['parent'])), 
    takeWhile(route => !!route['parent']), 
    pluck('snapshot', 'data'), 
    reduce(merge)); 

Giải thích:

Calling mở rộng ở đây tạo ra một quan sát được đối với từng tuyến đường trong chuỗi mẹ. Trong khi đó được sử dụng để nó dừng đệ quy khi route ['parent'] trả về null, hoặc tại route gốc.

Sau đó, đối với tất cả các tuyến đường đó trong phạm vi quan sát được, việc nhổ sẽ ánh xạ từng vị trí đến thuộc tính 'snapshot.data' của nó.

Cuối cùng, giảm đang được cung cấp chức năng hợp nhất từ ​​lodash để kết hợp tất cả các đối tượng dữ liệu vào một đối tượng. Luồng này tập hợp tất cả dữ liệu từ tuyến đường hiện tại qua các tuyến đường mẹ

Answer 4

Từ góc 5.2, bạn có thể định cấu hình Router để kế thừa tất cả các thông số cho trạng thái con. Xem this commit nếu quan tâm đến các chi tiết đẫm máu, nhưng dưới đây là cách nó làm việc cho tôi:

Bất cứ nơi nào bạn có cuộc gọi của bạn để RouterModule.forRoot(), bao gồm một đối tượng cấu hình với chiến lược thừa kế thiết lập để always (mặc định là emptyOnly):

import {RouterModule, ExtraOptions} from "@angular/router"; 

export const routingConfiguration: ExtraOptions = { 
    paramsInheritanceStrategy: 'always' 
}; 

export const Routing = RouterModule.forRoot(routes, routingConfiguration); 

Bây giờ, khi bạn đang ở trong một thành phần con nhìn vào một số ActivatedRoute, thông số của tổ tiên xuất hiện ở đó (ví dụ: activatedRoute.params) thay vì một cái gì đó lộn xộn như activatedRoute.parent.parent.parent.params. Bạn có thể truy cập trực tiếp vào giá trị (ví dụ: activatedRoute.params.value.userId) hoặc đăng ký qua activatedRoute.params.subscribe(...).