我<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>
在那里我毫无问题地传递了参数。一旦进入grocery-list/:id 路由,它就会加载''子路由并加载GroceryListProductsComponent 到<router-outlet>
.
现在我想<router-outlet>
在 GroceryListProductsComponent HTML 中使用这个指令从 GroceryListProductsComponent(加载到)链接到另一个子路由(ProductsComponent):
<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 个根路由之间传递参数时,我没有问题。
提前致谢。