在父页面与子组件之间传递参数

Question

我在使用 Angular 中的路由机制时遇到困难 9. 我有一个 Buildings 组件和一个 BuildingDetailComponent。我无法在 BuildingDetailCompoent 中获取参数。它不在那里，即使它出现在地址栏的 URL 中。

所以在父组件中我只有这个..

const routes: Routes = [ { path: '', component: BuildingsComponent, data: { title: 'Buildings' } } ];

然后在路由的建筑细节组件中我有这个。

 const routes: Routes = [ { path: '', component: BuildingDetailComponent, data: { title: 'Buildings},
  children: [ 
    { path: 'building-detail', component: BuildingDetailComponent, data: { title: 'Building Detail' } },
    { path: 'building-detail/:id', component: BuildingDetailComponent, data: { title: 'Building Detail' } }       
  ]
}
];

所以基本上我在 BuildingComponent.html...

中像这样传递值

<td style="text-align: center;"><button [routerLink]="['./building-detail', building.ID]" class="button button-primary"><span >Edit</span></button></td>

然后在 BuildingDetailComponent 中，我使用以下方法收集值...

this.buildingID = (this.route.snapshot.paramMap.get('id') != null) ? parseInt(this.route.snapshot.paramMap.get('id')) : 0;

我已经尝试了很多路由，最后这是我现在唯一需要的部分 this.building.ID 未定义所以当我查看 this.route 时没有参数，即使传递的值可以在地址栏中可以看到。

我可以通过执行以下操作并可能对其进行一些处理来了解它，但感觉不对。

let URL = this.router.url;

我希望作为最后的途径，有人可以就此向我提供建议。

谢谢。

Answer 1

问题是 Angular 将转到第一个匹配的路线，即 path: ''，这就是为什么您在那里看不到 :id 的原因。

我们可以通过进行一些更改来改进子路由，因此 Angular 将转到子路由

中的路径 :id

const routes: Routes = [ 
  { 
    path: 'building-detail',   
    children: [ 
      { path: '', component: BuildingDetailComponent, data: { title: 'Building Detail' } },
      { path: ':id', component: BuildingDetailComponent, data: { title: 'Building Detail' } }       
    ] 
  }
];

希望对您有所帮助

在父页面与子组件之间传递参数

Passing parameters between a parent page to the child component

typescript

angular

angular-activatedroute