Question

我有一个包含路由器插座的组件。容器和以路由器出口为目标的组件都共享相同的数据和相同的服务。我使用路由器插座目标组件来更新数据。我希望无论何时提交路由器出口组件并更新数据时，都使用更新后的数据来更新容器组件。我曾想像使用嵌入式组件那样使用事件（发射器）来做到这一点，但我认为路由器插座没有这种确切的功能。我倾向于认为解决方案就在路由中。这是我相关的代码部分：这是容器中的路由器出口：

<router-outlet name="Data"></router-outlet>

这是更新数据（处理服务）时路由器出口目标组件中的代码部分：

onSubmit()
{
  let savedModel = this.prepareSavedModel();
  let sub = this.srv.Update(savedModel).subscribe(result => {
     // unsuccessful test to raise an event
     //this.notifyWhenSubmit.emit('Data Was updated');
     //Data is being updated

      this.navToParent(); // navigate back to the router outlet container 
   });

} 常用的navToParent函数：

 navToParent(){
  let cmds = GetRoutePath(this.activatedRoute.parent);
  let params = GetQueryStringAsParams(this.activatedRoute);    
  let extras:NavigationExtras = { queryParams: params };
  this.router.navigate(cmds, extras);  
 }

以及从组件容器中的服务中提取数据的位置：

ngOnInit() {

  this.nav.service = this.service;
  this.service.Products.subscribe(result => this.initiateData(result));

使用路由器出口中要更新的数据更新容器组件

0 个答案: