小编d k*_*d k的帖子

我正在使用带有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不一定会后再次调用 …