如何處理需要AfterViewInit的OnChanges

我使用的D3與Angular2，後面的例子here。我的部分是這樣的：如何處理需要AfterViewInit的OnChanges

@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之前已準備就緒，則在調用ngOnChanges時將不確定this.selection。然而一個無法加入其他條件這樣this.selection：

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

因爲那麼圖表將不會在所有的情況下建造當輸入就緒之前ngAfterViewInit因爲ngOnChanges不一定會再次ngAfterViewInit後調用。

對於這種情況是否有最佳做法？我意識到幾乎總是輸入在ngAfterViewInit之前不會準備好，但它是可能的。有一些類似的擔憂表明here，但它不完全相同。

提前致謝！

編輯：更多的試驗後，看來我可以在ngOnChanges做

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

，甚至ngAfterViewInit之前，這是令人驚訝的。

來源

2016-12-01 d k

有傳入ngChanges稱爲isFirstChange，你可以用它來檢查，如果變化是初始化之前（這將是真）SimpleChange對象上的功能。

來源

2016-12-01 05:21:24 JayChase

能否詳細介紹一下在這種情況下如何使用它？不知道這將如何幫助我確保視圖已經初始化並且輸入已經準備好，然後再繼續構建圖表 –

我考慮了一下，並且對ngOnChanges中的第一次修改和構建第一個圖表在'ngAfterViewInit'中。然後在以後的更改中，圖表將被重建。也許添加這個到你的答案。謝謝！ –

如何處理需要AfterViewInit的OnChanges

回答

相關問題