我正在嘗試將一個 Angular 12 專案劃分為 (lazyload) 模塊，但是我在訪問其中一個子路由中的路由引數時遇到了問題。我有以下（簡化的）模塊結構：
app.module
| settings.module
| core.module
我有app.module的以下路線：
{ path: 'portfolio/:portfolio', component: PortfolioComponent, canActivate: [AccessGuard],
children: [
{ path: 'settings', component: PortfolioSettings, canActivate: [PortfolioAccessGuard],
children: [
{ path: 'product-settings', loadChildren: () => import('./product-settings/product-settings.module').then((m) => m.ProductSettingsModule) },
]}
]}
以及product-settings.module的以下路線：
{ path: '', component: ProductSettingsComponent, canActivate: [PortfolioAccessGuard] },
{ path: ':product', component: ProductSettingsComponent, canActivate: [PortfolioAccessGuard], children [...] }
例如，您可以獲得以下路線：
- .../portfolio/somePortfolioId/settings
- .../portfolio/somePortfolioId/settings/product-settings
- .../portfolio/somePortfolioId/settings/product-settings/someProductId
訪問防護位于core.module 中。
如您所見，要訪問上述路由，需要通過 PortfolioAccessGuard。在這個 PortfolioAccessGuard 中，我想檢查 :portfolio 引數。當我訪問第一條路線時，這可以作業，使用以下代碼：
route.parent.parent.params.portfolio （路由是一個 ActivatedRouteSnapshot）
但是，當我從子路由（通過產品設定）訪問它時，我似乎找不到這個引數。我嘗試了幾種使用 angular ActivatedRoute、ActivatedRouteSnapshot 和 Router 的方法，但我還沒有找到可行的方法。我試過的一些例子：
this.activatedRoute.queryParams.subscribe(values => console.log(values))其中，activatedRoute 的型別為 ActivatedRoute 給出了 {}。this.activatedRouteSnapshotActivatedRouteSnapshot 型別的列印給出了資料、引數、queryParams 和 url 為空，父級甚至不存在。this.router型別為 Router 的列印顯示其屬性browserUrlTree包含有關我正在查找的引數的一些資訊，但我不知道如何訪問它。
所以我的掙扎如下：從訪問最后兩個提到的路線中找到這個 :portfolio 引數的最佳方法是什么？
uj5u.com熱心網友回復：
當您使用時，this.activatedRoute.queryParams.subscribe(values => console.log(values))您訪問的是 QueryParams 而不是 Params。
盡量不要獲取路由的父級所有引數和查詢引數必須在當前路由快照中可用。
Don't Use:
route.parent.parent.params.portfolio;
Try Use:
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const id = route.params['portfolio'];
console.log(id);
}
uj5u.com熱心網友回復：
您正在嘗試訪問上面提到的未在路由中定義的 queryParams。
您可以通過以下方式解決：
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.paramMap.subscribe(paramsMap => {
const portfolio = paramsMap.params['portfolio'];
});
}
這可能會有所幫助。
謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/395877.html