Angular2等待一个组件订阅完成
我有一个自定义组件,它在初始化时从数据服务获取国家和一组国家。如何将已完成工作的消息传递给另一个组件 PeopleParentComponent—保存搜索模型,并在初始化时将数据发送到构造器中有PeopleDataService的网格 SearchChildComponent-SearchModel CountrySelectorComponent-SearchModel.Country-从Init上的commonDataService获取数据,并为用户设置正确的国家/地区 GridChildComponent-从父级接收数据 当PeopleParentComponent运行时,它构建SearchChildComponent->CountrySelector组件。在初始化期间,它还从peopleDataService for grid获取数据,但搜索模型并不完整,因为CountrySelector组件正在获取其国家和选定的国家。我可以在搜索组件归档后运行它并手动获取消息,但是在设置好所有组件后如何操作呢 将消息发布到ParentComponent->我们已经完成了获取搜索数据的工作,您可以获取网格数据 编辑: CountrySelectComponentAngular2等待一个组件订阅完成,angular,rxjs,observable,Angular,Rxjs,Observable,我有一个自定义组件,它在初始化时从数据服务获取国家和一组国家。如何将已完成工作的消息传递给另一个组件 PeopleParentComponent—保存搜索模型,并在初始化时将数据发送到构造器中有PeopleDataService的网格 SearchChildComponent-SearchModel CountrySelectorComponent-SearchModel.Country-从Init上的commonDataService获取数据,并为用户设置正确的国家/地区 GridChildC
@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>