请求的数据通过一次父组件，并对所有子路由访问？（Angular2）(Request data

我有两个孩子的路线父组件。每个孩子的路线将需要使用/访问来自一个GET请求检索相同的数据。

我想这可能是浪费每一个孩子的路线被加载时查询服务器，所以我想这样做是通过父路由一次查询服务器，然后通过双向服务之后共享数据的好方法，我正在努力实现以下的角文档紧密结合。

然而，无论是子组件都能够订阅服务中设定的观察，我不知道为什么？

这里有一些代码段;

父组件：

@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 。但我不能做什么最好的方法是如此的任何意见是真正的赞赏十分肯定。

希望这个问题是清楚的，让我知道，如果你需要更多的信息！谢谢

角解析器来救援！

首先，如下定义一个路由配置：

{
    path: 'parent',
    component: ParentComponent,
    resolve: {
      data: DataResolverService
    },
    children: [
      {
        path: 'child1',
        component: Child1Component,
      },
      {
        path: 'child2',
        component: Child2Component,
      }
    ]
  },

其中DataResolverService

@Injectable()
export class DataResolverService implements Resolve<any> {

    constructor(private testService: TestService) {
    }

    resolve(route: ActivatedRouteSnapshot): Observable<any> {
        return this.testService.getData().first();
    }

}

然后在你的组件：

constructor(private activatedRoute: ActivatedRoute) {
    }

    ngOnInit() {
        this.activatedRoute.parent.data.pluck('data').subscribe((data: any) => {
            this.data = data;        
        });
    }