Angular 7组件交互设计

Question

angular应用程序包含以下组件：

通过URL加载并具有FirstId的FirstComponent

FirstComponent的子类ChildComponent。ChildComponent通过路由器加载SecondComponent。

SecondComponent是通过路由器加载的，并且具有SecondId。

如果在SecondComponent中有一个按钮点击，并且SecondComponent是由ChildComponent在FirstComponent中加载的，那么我需要用FirstId和SecondId插入一个记录。

实现这一目标的设计是什么？

Answer 1

假设

配置URL：/path-1/:firstId/path-2/:secondId

• Route

{ 
  path: 'path-1/:firstId', 
  component: FirstComponent, 
  children: [
    { path: 'path-2/:secondId', component: SecondComponent }
  ]
}

您可以通过在:firstId中注入ActivatedRoute来访问SecondComponent和:secondId。

constructor(private activatedRoute: ActivatedRoute) {
  this.activatedRoute.paramMap.subscribe(paramMap => {
    const firstId = paramMap.get('firstId')
    const secondId = paramMap.get('secondId');
  })
}

为此，您需要在根RouterModule配置中设置paramsInheritanceStrategy。

RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always' })