Question

我有自定义组件来获取国家/地区，并在初始化时从数据服务中设置一个。如何将已完成工作的消息传递给另一个组件？

PeopleParentComponent - 保存搜索模型，并在init上将数据发送到网格（在构造函数中有PeopleDataService）
- SearchChildComponent - SearchModel
  - CountrySelectorComponent - SearchModel.Country - 从Init上的commonDataService获取数据并为用户设置正确的国家/地区
- GridChildComponent - 从父

当PeopleParentComponent运行时，它构建SearchChildComponent - ＆gt; CountrySelectorComponent。同样在Init期间，它从peopleDataService获取网格数据，但搜索模型不完整，因为CountrySelectorComponent正在获取其国家和选定的国家/地区。我可以在提交搜索组件后运行它并手动获取消息，但是在设置完毕后如何操作？

将消息发布到ParentComponent的内容 - ＆gt;我们完成了获取搜索数据，你可以获得网格数据。

编辑：

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

的SearchComponent

 @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
 }

为父级

@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 !
    }
}

EDIT2：我试图在路由上创建Resolver。

@Injectable()
export class CommonDataCountryResolver implements Resolve<Country[]> {

constructor(private commonService: CommonDataService, private router: Router) { }
resolve(route: ActivatedRouteSnapshot): CountryModel[] | Promise<CountryModel[]> | Observable<CountryModel[]> {
    return this.commonService.getCountries().toPromise().then(countries=> {
        if (countries) {
            return countries;
        } else { //not found
            this.router.navigate(['/home']);
            return false;
        }
    });
}

}

路线

...
 children: [
 { path: 'People', component: PeopleComponent, resolve: { countries: CommonDataCountriesResolver } },
...

现在CountrySelectorComponents得到了

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 of SearchComponent，然后是ngInit of Child - CountrySelectorComponent。

EDIT3：

我更接近答案。我在搜索组件中添加了发射器，它在ngAfterViewInit（）上发出，在设置了所有组件之后，并添加了* ngIf用于在父级中创建网格。

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

Answer 1

将消息发布到ParentComponent的内容 - ＆gt;我们完了获取搜索数据后，您可以获取网格数据。

子组件中的

：

@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>

Angular2等待一个组件订阅完成

1 个答案: