Question

我正在使用带有Angular2的D3，遵循示例here。我的组件就像：

@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。< / p>

这样的案例是否有最佳做法？我意识到几乎总是输入在ngAfterViewInit之前就没有准备就绪，但它是可能的。有一些类似的问题是here，但它并不完全相同。

提前致谢！

编辑：经过更多实验，看来我可以做到

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

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

Answer 1

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

如何处理需要AfterViewInit的OnChanges

1 个答案: