如何在 Nativescript 中将参数从同级路由传递到子路由

Question

我使用<page-router-outlet>作为应用程序中的主要出口。

在其中一个页面中.html我有几个导航按钮和一个<router-outlet>，因为我想将单击这些按钮的结果呈现到<router-outlet>。

在路由级别，该页面具有子路由：

const groceryListRoutes: Routes = [
{
path: 'grocery-lists',
component: GroceryListsComponent,
},
{
path: 'grocery-list/:id',
component: GroceryListComponent,
children: [
{
path: '',
component: GroceryListProductsComponent,
},
{
path: 'product-categories',
component: ProductCategoriesComponent,
},
{
path: 'products',
component: ProductsComponent,
},
],
},

从列出所有购物清单的页面中，我链接到使用如下所示[nsRouterLink]显示特定购物清单信息的页面：

<Label [text]="item.name" margin="10" [nsRouterLink]="['/grocery-list', groceryListId]"></Label>

在那里我传递了参数，没有问题。一旦进入杂货列表/：id路由，它就会加载''子路由并在<router-outlet>中加载GroceryListProductsComponent。

现在我想从 GroceryListProductsComponent(<router-outlet>年加载)链接到另一个子路由(产品组件)，在 GroceryListProductsComponent HTML 中使用此指令：

<Label text="Next" width="80" height="80" [nsRouterLink]="['../products/', {zzz: 22}]"></Label>

应用导航到同级路由，但不传递参数 zzz。我尝试使用这样的查询参数：

<Label text="Next" width="80" height="80" [nsRouterLink]="['../products/', 22]"></Label>

并将路线更改为：

{
path: 'products/:zzz',
component: ProductsComponent,
}

没有结果。

我正在获取目标组件上的参数，如下所示：

constructor(private pageRoute: PageRoute, private router: Router){
this.pageRoute.activatedRoute
.switchMap(activatedRoute => activatedRoute.params)
.forEach((params) => { 
this.zzz= params['zzz'];
});
}

但是当我尝试 alert() 变量 this.zzz 时，它说：未定义。

ngOnInit(){
alert(this.zzz);
}

所以我的问题是，如何在 Nativescript 中将参数从同级路由传递给子路由？ 因为当我在 2 个根路由之间传递参数时，我没有问题。

提前谢谢。

Answer 1

解决了问题。

我应该从我从PageRoute获得的激活路由访问子路由。所以构造函数应该是这样的：

constructor(private pageRoute: PageRoute, private router: Router){
this.pageRoute.activatedRoute
.switchMap(activatedRoute => activatedRoute.children[0].paramMap)
.forEach((params) => { 
this.zzz= params['params']['zzz'];
});
}

我用这个从子路由访问了参数：

activatedRoute.children[0].paramMap