Angular2等待一个组件订阅完成

Angular2等待一个组件订阅完成,angular,rxjs,observable,Angular,Rxjs,Observable,我有一个自定义组件,它在初始化时从数据服务获取国家和一组国家。如何将已完成工作的消息传递给另一个组件 PeopleParentComponent—保存搜索模型,并在初始化时将数据发送到构造器中有PeopleDataService的网格 SearchChildComponent-SearchModel CountrySelectorComponent-SearchModel.Country-从Init上的commonDataService获取数据,并为用户设置正确的国家/地区 GridChildC

我有一个自定义组件,它在初始化时从数据服务获取国家和一组国家。如何将已完成工作的消息传递给另一个组件

PeopleParentComponent—保存搜索模型,并在初始化时将数据发送到构造器中有PeopleDataService的网格 SearchChildComponent-SearchModel CountrySelectorComponent-SearchModel.Country-从Init上的commonDataService获取数据,并为用户设置正确的国家/地区 GridChildComponent-从父级接收数据 当PeopleParentComponent运行时,它构建SearchChildComponent->CountrySelector组件。在初始化期间,它还从peopleDataService for grid获取数据,但搜索模型并不完整,因为CountrySelector组件正在获取其国家和选定的国家。我可以在搜索组件归档后运行它并手动获取消息,但是在设置好所有组件后如何操作呢

将消息发布到ParentComponent->我们已经完成了获取搜索数据的工作,您可以获取网格数据

编辑:

CountrySelectComponent

 @Component({
 selector: 'country-select',
 template: ` //wrapper around custom select`,
 providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CountrySelectComponent, multi: true,}]
 })
 export class CountrySelectComponent implements ControlValueAccessor, OnInit {
     private data : CountryModel[]
     private countryModel : CountryModel;
     constructor(private commonDataService : CommonDataService){}
     ngOnInit(){
     this.commonDataService.getCountires().subscribe(
         data => {this.data = data; this.value = data[0]}) //gets data from server and sets the first value
     }
 {
 ... implemetation of ControlValueAccessor
@Component({
selector: 'people',
template: `
<people-search [(ngModel)]='searchModel' (searchEmitter)='perform'></people-search>
<people-grid [gridDataStore]='gridDataStore'></people-grid>
`
})
export class PeopleComponent implements onInit{
searchModel : PeopleSearchModel = new PeopleSearchModel();
gridDataStore : CustomStore;

constructor(private peopleService : PeopleService){}
ngOnInit(){
this.gridDataStore = new CustomStore({
    load : (opts) => {
        //some paging and sorting
        return this.peopleService.getPeople(this.searchModel).toPromise().then(data =>{
            return { data : data.data, totalCount : data.totalCount} }}}) //Fetches the grid data before the search model is complete !
    }
}
搜索组件

 @Component({
     selector: 'people-search',
     tempalte: `
         <country-select ngModel]="value?.country" (ngModelChange)="value?.country? value.country= $event : null"'></country-select>
         //Some other controllers like country select`
         <button (click)='performSearch()
     }),
     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SearchComponent , multi: true,}]
 export class SearchComponent implements ControlValueAccessor {
     @Output() searchEmitter = new EventEmitter(); 
     peroformSearch(){
         this.searchEmitter.emit(true)//the data is inside Model so it passes just boolean to run a method in Parent - this could be changed?
     }
     ... implemetation of ControlValueAccessor
 }
现在CountrySelector组件得到了

constructor(private route: ActivatedRoute,

ngOnInit() {
    this.route.data.subscribe(
        (data: { countries: any }) => {
            this.data = data.countries;
            if (data)
                this.value = data.countries[0];
        }
    );
它可以工作,但仍然有问题

解析器的ngInit首先给出列表 父组件的ngInit启动。。。这是不好的,因为它试图用搜索模型更新网格。 搜索组件的nhInit,然后是Child-country选择器组件的ngInit。 编辑3:

我离答案有点近了。 我在搜索组件中添加了发射器,它在ngAfterViewInit上发射,这是在设置了所有组件之后,并在父级中为网格创建添加了*ngIf

但这给了我另一个问题: 我的国家/地区数据列表工作正常,并在开始时设置了[0]元素,但之后我从搜索组件获得了ngModel,该组件覆盖了使用空模型选择的国家/地区

将消息发布到ParentComponent->我们完成了 通过获取用于搜索的数据,您可以获取用于网格的数据

在子组件中:

@Component({
  selector: 'child-complnent',
})
export class childComponent implements OnInit {
  @Output() notifyThatWorkIsComplete = new EventEmitter();

  ngOnInit() {
    // get data for search and when it's complete do
    this.notifyThatWorkIsComplete.emit();
  }

  constructor(){}
}
在父组件的模板中放置Cometing

<child-component (notifyThatWorkIsComplete)="getDataForGrid()"></child-component>

请出示我想到的简单答案的代码。因此,我的子组件countrySelect将向搜索组件提供有关完成的信息,并向父组件提供相同的信息,然后当父组件完成时,*ngIf将生成网格组件。但由于有很多子组件,搜索将包含很多方法,可以在ngModel中传递布尔值,如:Countries[],selectedCountry,isActive。。。但还是不好看。
@Component({
  selector: 'child-complnent',
})
export class childComponent implements OnInit {
  @Output() notifyThatWorkIsComplete = new EventEmitter();

  ngOnInit() {
    // get data for search and when it's complete do
    this.notifyThatWorkIsComplete.emit();
  }

  constructor(){}
}
<child-component (notifyThatWorkIsComplete)="getDataForGrid()"></child-component>