前面了解了如何通過render來操作dom，那我們遇到需要跳轉到頁面特定節點的需求該如何辦？還是通過使用@ViewChild的方法來實作。
控制展示頁面裡面某個可滾動區域
這種情況比較常見，有一個頁面裡面的子區域，這個區域是固定高度，可以上下滑動檢視，這時候有需求，當展示這個子區域的時候，希望是先滑動到底部。
首先看看html結構：
1
2
3
4
5
可以看到，我們聲明了一個模闆變量#scrollMe用來給ts來控制。再看看ts：
[email protected]('scrollMe') sellContent: ElementRef;
我們将html中的模闆引用變量聲明為一個子視圖。然後我們可以控制它的滾動高度：
1this.sellContent.nativeElement.scrollTop = this.sellContent.nativeElement.scrollHeight;
獲得原生元素的滾動總高度，然後設定元素的目前滾動高度為總高度，即可實作需求。
但是，在實際操作的過程中，嘗試了很久都沒起作用。查來查去才發現，元素上面有個*ngIf，當ngIf的表達式為true的時候立馬去設定高度并不能擷取到實際高度。是以這裡需要加一個延遲：
1
2
3timer(0).subscribe(() => {
this.sellContent.nativeElement.scrollTop = this.sellContent.nativeElement.scrollHeight;
});
還是要特别注意這一點：有ngIf的情況下，設定Dom屬性的時候需要加個延遲，否則擷取不到實際的值。
控制跳轉到某個子視圖節點
有時候我們跳轉到一個頁面，同僚需要跳轉到這個頁面的特定子節點，但是我們的router的navigator方法并沒有支援跳轉到标簽。我們還是需要通過@ViewChild的方式來進行跳轉。
繼續來看html：
1
2
3
4
我們建立了模闆引用變量#googleCode，友善在ts中控制Dom。再看ts：
[email protected]('googleCode') googleCode: ElementRef;
使用@ViewChild聲明了元素的render，然後我們使用scrollIntoView方法來跳轉到對應Dom：
1this.googleCode.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
看看scrollIntoView這個方法(MDN scrollIntoView())：
Element.scrollIntoView() 這個方法可以讓目前元素滾動到浏覽器視窗的可視區域内。
該方法的參數有三種：
無參數，等同于element.scrollIntoView(true)。
alignToTop: boolean，即element.scrollIntoView(alignToTop)，兩種情況：true: 元素的頂端将和其所在滾動區的可視區域的頂端對齊。
false: 元素的底端将和其所在滾動區域的可視區域的底端對齊。
Object型參數：behavior: 定義緩動動畫，值為auto|instant|smooth。預設為auto
block: 定義元素區域，值為start|center|end|nearest，預設為center
inline: 值為start|center|end|nearest，預設為nearest
其中，
scrollIntoView() === scrollIntoView(true) === scrollIntoView({block: 'start', inline: 'nearest'}).
scrollIntoView(false) === scrollIntoView({block: 'end', inline: 'nearest'})
兩種滾動的需求，兩種滾動的方式。