如何处理需要AfterViewInit的OnChanges

Question

我正在使用带有Angular2的D3,遵循此处的示例.我的组件是这样的:

@Component({
selector: 'example-component',
template: '<div #someElement></div>'
})
class exampleComponent implements OnChanges, AfterViewInit {
  @ViewChild('someElement') someElement: any;
  @Input() someInput: any; //got from API in service provided by parent component

  htmlElement: any;
  selection: any;

  ngAfterViewInit() {
    this.htmlElement = this.someElement.nativeElement;
    this.selection = D3.select(this.htmlElement);
  }

  ngOnChanges() {
    if (!this.someInput) return;
    this.selection.append('svg');
// continue to build chart
  }
}

这个问题是输入可以在ngAfterViewInit调用之前就绪.该if语句阻止在输入准备好之前构建图表,但如果它已准备就绪,ngAfterViewInit那么this.selection在ngOnChanges调用时将不确定.但是,无法添加其他条件,this.selection例如:

if (!this.someInput || !this.selection) return;

因为那么图表将不会在所有的情况下建造当输入就绪之前ngAfterViewInit,因为ngOnChanges不一定会后再次调用ngAfterViewInit.

对于这样的案例,是否有最佳做法？我意识到几乎总是输入之前没有准备就绪,ngAfterViewInit但它是可能的.这里有一些类似的担忧,但它并不完全相同.

提前致谢!

编辑:经过更多实验后,我可以做到

this.htmlElement = this.someElement.nativeElement;
this.selection = D3.select(this.htmlElement);

内ngOnChanges,甚至之前ngAfterViewInit,这是令人惊讶的.

Answer 1

SimpleChange对象上有一个函数，称为isFirstChange，您可以使用它来检查更改是否在初始化之前（它将为真）传递给 ngChanges 。