通过父组件请求数据一次,并使所有子路由都可以访问?(角度2)

我有一个具有两个子管线的父组件。每个子路由将需要使用/访问从GET请求中检索到的相同数据。

我认为每次加载子路由时查询服务器可能会浪费时间,因此我认为这样做的一个好方法是通过父路由查询服务器一次,然后通过双向服务共享数据,我正试图按照 angular docs

以下是一些代码片段;

父组件:

@Component({
  selector: 'parent',
  template: `
 <div>

      <ul>
        <li><a routerLinkActive="active" routerLink="child1">Child1</a></li>
        <li><a routerLinkActive="active" routerLink="child2">Child2</a></li>
      </ul>

    </div>

    <router-outlet></router-outlet>
  `,
})
export class ParentComponent implements OnInit {


  constructor(private testService: TestService) {}


  ngOnInit(){
        this.testService.getData(this.testService.createProfileData())
  }

}

子组件(它们现在有相同的代码)

export class Child1Component implements OnInit {


  public profileData: any;

  constructor(private testService: TestService) {}

  ngOnInit(){
    this.testService.profile$.subscribe((data) => {
        console.log(data)
        this.profileData = data;
      })
  }
}

import { Injectable } from '@angular/core';

import 'rxjs/Rx';
import {Observable} from 'rxjs';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class TestService {

  profile = new Subject<any>();

  profile$ = this.profile.asObservable();

  getData(obj:any) {
    console.log(obj)
    return this.profile.next(obj);
  }

  createProfileData(){
    return {name:'test-me!'}
  }

}

这是一个包含所有代码的plunker:

https://plnkr.co/edit/CCnZbHTzU8R0uKo0WtbD?p=preview

此处所需的输出将用于父组件发送 GET 请求服务器(通过在此处创建简单对象来演示),然后更新 profile = new Subject<any>(); 服务内部。

然后,每次调用子路由时,它们都会通过服务订阅该观察者,并可以访问数据,而无需每次查询服务器。

ngrx/store 但是我真的不确定最好的方法是什么,所以非常感谢你的建议。

希望问题清楚,如果你需要更多信息,请告诉我!谢谢