angular - 如何处理需要AfterViewInit的OnChanges

我遵循here示例，将D3与Angular2一起使用。我的组件是这样的:

@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之前没有准备好输入，但是有可能。用here表示也有一些类似的问题，但这并不完全相同。

提前致谢!

编辑:经过更多的实验，看来我可以做

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

在ngOnChanges内，甚至在ngAfterViewInit之前，这令人惊讶。

最佳答案

传递给ngChanges的SimpleChange对象上有一个函数，称为 isFirstChange ，您可以使用该函数检查更改是否在初始化之前进行(这是真的)。