Angular 5:如何在子组件中获取父组件路由参数? | 如何在子组件中获取父组件路由参数

本文介绍了Angular 5:如何在子组件中获取父组件路由参数?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这里是add-new-folder.component，当我在add-new-folder.component上路由时，这个组件是folder.component的子组件 来自 folder.component 那个时候我想要 folder.component 参数 userid 在它的子组件中，我尝试了下面的代码，但我得到了控制台 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

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

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

folder.component.html

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

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:如何在子组件中获取父组件路由参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！