javascript - Truy cập các tham số route trong các thành phần bố cục và dịch vụ của Angular 7/8?

Tôi có một ứng dụng đa người thuê mà xác định người thuê dựa trên một tham số đường dẫn gọi là organization. Tôi có nhiều phần của ứng dụng cần thay đổi hành vi dựa trên tổ chức được truyền qua tham số đường dẫn, nhưng tôi đang gặp một số vấn đề khi truy cập tham số này ở bất kỳ đâu ngoài thành phần mà bộ định tuyến đã điều hướng đến.

Trong nhiều phần của ứng dụng của tôi, tôi đã đặt một biến thể của đoạn mã sau:

export class OrganizationSidebarComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      console.log('[OrganizationSidebarComponent] ID IS ' + params['organization']);
      console.log(params);
    });
    this.route.paramMap.subscribe(paramMap => {
      console.log('[OrganizationSidebarComponent] ID from ParamMap: ' + paramMap.get('organization'));
    });
    console.log('[OrganizationSidebarComponent] ID using snapshot paramMap: ' + this.route.snapshot.paramMap.get('organization'));
    console.log('[OrganizationSidebarComponent] ID using snapshot params: ' + this.route.snapshot.params.organization);
  }
}

Tuy nhiên, khi các trang được điều hướng đến, kết quả hiển thị sẽ trông như sau:

Các tuyến đường của tôi được thiết lập như sau:

const routes: Routes = [
  {
    path: 'Organization',
    component: OrganizationsLayoutComponent,
    children: [
      {
        path: ':organization',
        component: OrganizationDashboardComponent,
        canActivate: [AuthGuard]
      }
    ]
  }
];

Trong một thế giới hoàn hảo, tôi sẽ có thể truy cập các giá trị từ một dịch vụ được tiêm vào để tôi có một dịch vụ truy xuất tập trung mà tôi có thể tận dụng để lấy thông tin cần thiết, nhưng tôi đơn giản chỉ gặp vấn đề khi lấy các tham số tuyến đường từ bất kỳ nơi nào không phải là thành phần đang được điều hướng đến.

Làm thế nào tôi có thể truy cập thông tin này?

Câu trả lời #1

Tôi gợi ý làm theo cách khác, (dựa trên tuyên bố vấn đề của bạn) thay vì đọc tổ chức trong nhiều thành phần và tải dữ liệu, hãy đọc điều đó trong app.component như dưới đây

thêm phương thức này vào App.component.ts

  mergeRouteParams(router: Router): { [key: string]: string } {
    let params = {};
    let route = router.routerState.snapshot.root;
    do {
      params = { ...params, ...route.params };
      route = route.firstChild;
    } while (route);

    return params;
  }

sau đó trong ngOnInit làm điều này

    this.router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        const mergedParams = this.mergeRouteParams(this.router);
        console.log(mergedParams);
      }
    });

và tất nhiên thêm private router: Router vào constructor của bạn

Đang làm việc với stackblitz

https://stackblitz.com/edit/angular-merge-route-params

URL để kiểm tra https://angular-merge-route-params.stackblitz.io/dictionary/dict/code

Giải pháp 2

Một cách khác để lấy tất cả các tham số là sử dụng cấu hình tuyến đường

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

@NgModule({
    imports: [RouterModule.forRoot(routes, routingConfiguration)],
    exports: [RouterModule],
})
export class AppRoutingModule { }

bây giờ nếu bạn tiêm route: ActivatedRoute vào params hoặc paramsMap bạn sẽ nhận được tất cả các tham số từ các parent bao gồm cả route con này