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>

我通过参数没有任何问题。进入grocery-list /：id路由后，它会加载''子路由并在<router-outlet>中加载GroceryListProductsComponent。

现在我想在GroceryListProductsComponent HTML中使用此指令将GroceryListProductsComponent（在<router-outlet>中加载）链接到其他子路由（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'];
    });
}

但是当我尝试警告（）变量this.zzz时，它说：undefined。

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

所以我的问题是，如何从Nativescript中的兄弟路由传递参数到子路由？因为当我在2根路径之间传递参数时我没有问题。

提前致谢。

Answer 1

解决了这个问题。

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

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

如何从Nativescript中的兄弟路由传递参数到子路由

1 个答案: