Question

我试图获得

中定义的：id param

RouterModule.forRoot([
  {
    path: 'orders',
    component: ListComponent,
    children: [
      {
        path: 'view/:id',
        component: ViewComponent
      },
    ]
  }
])

来自ListComponent的

。

我已经尝试过了：

route: ActivatedRoute

route.params.subscribe(params => {
  let id = +params['id'];
})

从ListComponent

，但是params数组是空的，我想是因为：id param属于viewComponent而不是listComponent

如何在listComponent中获取id参数？

Answer 1

您可以使用' '属性或firstChild来获取子路线：

ActivatedRoute

Answer 2

要在父组件中获取子项的参数，我使用了ActivatedRoute的firstChild属性，因为我只有子路径

route: ActivatedRoute

route.firstChild.params.subscribe(params => {
  let id = +params['id'];
});

Answer 3

递归寻找儿童参与不会总是得到你正在寻找的参数。特别是在移动路线时。

相反，RxJS ReplaySubject可用于发布当前子ID。

创建新服务：

@Injectable()
export class ChildIdService  {
  current$ = new ReplaySubject<number>();
}

将其导入子组件并订阅重播主题：

export class ChildComponent implements OnInit {
  constructor(private ar: ActivatedRoute, public ci: ChildIdService){}

  ngOnInit(){
    this.ar.params.map(params => +params.id).subscribe(this.ci.current$);
  }
}

在父组件上导入服务并使用异步管道订阅子值：

<span>Mother component child ID: {{ci.current$ | async}}</span>

以下是一个工作代码段：https://stackblitz.com/edit/angular-b8xome（在浏览器应用预览中添加/ child / 42以查看其是否有效）

或者将组件定义为兄弟，并将父组件添加为无组件路由，例如：“https://vsavkin.com/the-powerful-url-matching-engine-of-angular-router-775dad593b03在”使用相同数据的同级组件“下

Answer 4

如果只有一个子路由，您可以继续挖掘route.firstChild.params['id']或使用route.children[0].children[1].params['id']之类的东西来使用括号表示法挖掘多个级别来访问兄弟路由。在找到正确的水平时，它有点反复试验。

Answer 5

另一种方法是在父组件中添加以下内容：

<ng-container *ngIf="routerOutlet.isActivated && routerOutlet.activatedRoute?.paramMap | async as paramMap">
child id is: {{paramMap.get('id')}}!
</ng-container>

<router-outlet #routerOutlet="outlet"></router-outlet>

当然，最好在子级使用有解析器而不是params

<ng-container *ngIf="routerOutlet.activatedRouteData['child'] as child">
child id is : {{child.id}}
</ng-container>

<router-outlet #routerOutlet="outlet"></router-outlet>

假设子路线具有以下特征：

// ...
resolve: {
 child: 'childResolver',
},

和子解析器可以在某些模块中：

// ...
providers: [{
    provide: 'childResolver',
    useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => ({
      id: route.paramMap.get('id')
    })
  }],

如何获取：来自Angular2中父组件的子路由的id参数

5 个答案: