angular - 将激活的路由参数从父组件传递给子组件

Question

在应用程序路由中，我有一个父组件和 3 个子组件：

{
   path: 'media', component: MediaComponent,
   children: [
      { path: '', redirectTo: 'photos', pathMatch: 'full' },
      { path: 'photos', component: PhotosComponent },
      { path: 'documents', component: DocumentsComponent },
      { path: 'links', component: LinksComponent }
     ]
}

在 MediaComponent 我得到一个这样的路由参数：this.activatedRoute.parent.snapshot.params.memberId;

在任何其他组件中，我尝试了同样的事情，但它是未定义的。我怎样才能将这些参数提供给孩子们？

Answer 1

我不确定为什么您可以在 MediaComponent 中访问此参数，但您可以为孩子尝试以下操作：

{ path: 'photos', component: PhotosComponent, resolve { memberId: <value> } }

然后通过以下方式访问它：

this.route.snapshot.data.memberId.value

BR

更新：

@Injectable()
export class MemberIdResolver implements Resolve<number> {
  constructor(private yourService: yourService) {}

  resolve(route: ActivatedRouteSnapshot): number {
    return this.yourService.getMemberId();
  }
}

然后在 app-routing.module.ts 中：

{ path: 'photos', component: PhotosComponent, resolve { memberId: MemberIdResolver } }

然后你可以在我之前提到的组件中访问它：

this.route.snapshot.data.memberId.value