angular - 如何处理需要 AfterViewInit 的 OnChanges

Question

我按照示例 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 之前，这令人惊讶。

Answer 1

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