Angular 2 Parent afterViewInit在Child afterViewInit

时间:2017-01-09 06:02:09

标签: javascript angular lifecycle

我有一个父容器和一个子组件。

子组件的数量可变,并从XHR请求中获取。

父组件:

@Component({
  selector: 'parent',
  template: `
     <child *ngFor="let c of children" [c]="c"></child>
   `
})
export default class ParentContainer implements AfterViewInit {
children: C[];

constructor(public api: Api) {
this.api.getC().subscribe(res => this.children = res);

ngAfterViewInit() {
  console.log('parent afterNgView');
}

子组件:

@Component({
selector: 'child',
template: `      
   <div>Child</div>
`
})
export default class ChildComponent implements AfterViewInit {
@Input() c: C;

ngAfterViewInit() {
  console.log('child afterViewInit');
}

当我执行此操作时,我会在所有parent afterNgView日志之前看到child afterNgView。我期待孩子们首先执行ngAfterViewInit。

必须有一种方法可以确保在调用父处理程序之前完成所有子项的加载。我查看了NG2 LifeCycle Hooks,假设父亲AfterViewInit只会在孩子们之后被调用。事实并非如此。

我怎样才能让孩子告知父母他们已经完成了?应该有一些开箱即用的东西......?

这是来自NG2 LifeCycle Hooks指南(https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

的截图

enter image description here

在我找到更清洁的东西之前,这就是我要做的事情:

父组件:

@Component({
  selector: 'parent',
  template: `
     <child *ngFor="let c of children" [c]="c" (childIsLoaded)="childIsLoaded($event)"></child>
   `
})
export default class ParentContainer implements AfterViewInit {
children: C[];

constructor(public api: Api) {
this.api.getC().subscribe(res => this.children = res);

childIsLoaded() {
  console.log('Child\'s ngAfterViewInit Complete !!');    
}

ngAfterViewInit() {
  console.log('parent afterNgView');
}

子组件:

@Component({
selector: 'child',
template: `      
   <div>Child</div>
`
})
export default class ChildComponent implements AfterViewInit {
@Input() c: C;
@Output() childIsLoaded = new EventEmitter<any>();

ngAfterViewInit() {
  ...init code...
  this.childIsLoaded.emit();
}

在上面的片段中,孩子发出一个事件,通知父母他的ngAfterViewInit被解雇了。必须有一些开箱即用的功能吗?而不是我为所有嵌套组件重写这个child-notify-parent方案..?

0 个答案:

没有答案