[問題] 用Angular的方法達成按下某個按鈕之後 視窗滾動到新增的元素頂端

General
1

大家好，小弟我又上來求救了XDDD

我有某個按鈕是按下之後會新增陣列裡的資料，
在Templete裡會按照這個陣列裡的資料新增區塊。

這次的需求是，
我必須在新增完之後，
讓視窗滾動的該區塊的頂端。

孤狗了一下都沒有比較好的解法，
所以只好上來求助各位大神。

還請各位大神指點一下迷津，感激不盡！！

2

可以利用這個功能，

API: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

2個讚
3

Kevin大大，抱歉，我最近超級忙，才終於有空好好看你的sample code…

我研究了一下，感覺好像還是不是我想要的東西，
應該是我沒有弄sample code的關係，抱歉。

使用情境是這樣子的：
我在A Component底下會有一個div是會根據陣列裡的資料去產生的，
一旦我丟了一筆資料進去這個陣列，
就會增加那一整塊div，
所以我想要在增加之後，
做到像您做的範例一樣，
可以讓視窗滾到那塊新增的區域，
不曉得在Angular裡有什麼方式可以達成這個目的呢？

Sample code如下，還請您不吝指教，萬分感謝！！

4

一定的原理，只要能取得新產生的區塊 element 即可

1個讚
5

哦哦哦哦哦！！

又學到一個新東西了！！「QueryList」！！

Kevin大大您寫了兩個solution，

還想請問一下優缺？

有使用哪一種solution比較好嗎～～？

6

solution 1 是使用 Angular 內建的方法完成的，是透過 Observable 的方式處理，我個人是比較喜歡這種，理由是

  1. RxJS
  2. 如果你重複的是另外一個 component 時，那 ViewChildren 可以直接取得該 component 的實體之類的
  3. QueryList 提供很多方法可以玩

solution 2 是使用原生地 javascript document api 完成的，這種作法如果在其他的案子有一樣的需求時，可以參考這種作法

沒有什麼優缺點

2個讚
7

了解～ 謝謝Kevin大的耐心講解～～感激不盡～