Angular 5:如何在子组件中获取父组件的路由参数? [英] Angular 5 : How to get parent component routing parameter in child component?

问题描述

这里是add-new-folder.component，当我从folder.component路由add-new-folder.component到add-new-folder.component时，我想在其子组件中使用folder.component参数userid时，此组件是folder.component的子组件，我尝试了以下代码，但得到了控制台NaN如何在子组件中获取父组件参数对我有帮助?

Here is add-new-folder.component, this component is child component of folder.component when I route on add-new-folder.component from folder.component that time I want folder.component parameter userid in its child component, I tried below code but i get console NaN how to get parent component parameter in child component kindly help me?

add-new-folder.component.ts

add-new-folder.component.ts

constructor(private route : ActivatedRoute,private router : Router){}  

ngOnInit() {     
  this.route.parent.params.subscribe(params => {
    const parentRouteId = +params['userid'];
    console.log(parentRouteId);
  });
}

folder.component.html

folder.component.html

<mat-icon [routerLink]="['/addNewFolders/',userid]">folder</mat-icon>

app-routing.module.ts

app-routing.module.ts

const routes: Routes = [
 { path: 'folder/:userid', component : FolderComponent,
   children: [
     { path: 'addNewFolders/:userid', component : AddNewFolderComponent },
   ]},
];

推荐答案

将以下属性添加到您的路线链接中，以保留参数.

Add the below attribute your route link to preserve the params.

 <a [routerLink]="['/base/addNewFolders/',userid]" queryParamsHandling="preserve"></a>

您只需要保留queryParams即可将参数也传递给子组件

You just have to preserve your queryParams so that you get the parameters to the child components too

这篇关于Angular 5:如何在子组件中获取父组件的路由参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！