在項目中,有些可以公用的組件,一般我們就抽離出來,然後在需要用到的頁面,再引入進來。那麼,當我們不僅僅需要共用組件的UI顯示,還需要用到組件裏的變量時,我們就可以用viewchild來獲取。具體做法如下:
一、確認page.component.ts中正確引入組件:
二:在page.component.ts中,引用:
@ViewChild(CommonComponent) common;
三、在需要的地方,調用數據:
console.log(this.common);
這樣,就可以在page.component.ts拿到我們需要的數據。
需要注意的一點是,一定要在ngAfterViewInit後,才能正確拿到組件數據。官方文檔是這麼說明的:
View queries are set before the ngAfterViewInit callback is called.
在調用 NgAfterViewInit 回調函數之前就會設置這些視圖查詢。