如何滾動到 Angular 樹中的選定節點

Question

我有一個帶有 Angular 樹組件的頁面。 單擊主儀表板上的特定元素時，樹節點會“聚焦”。 我通過使用 this.tree.treeModel.setFocusedNode(node) 來做到這一點，但它也應該滾動到匹配的節點。 不幸的是，滾動沒有發生。 是否有任何方法可以滾動到突出顯示/聚焦的元素？

對此是否有任何幫助表示贊賞

Answer 1

它應該與類似的東西一起工作

scroll(el: HTMLElement) {
 el.scrollIntoView({behavior: 'smooth'});
}

或使用外部依賴ngx-scroll-to

Answer 2

Oussama 建議的 scrollIntoView 實際上有效，讓該元素調用 scrollIntoView 只是有點棘手。 一種方法是將一個類分配給選定的節點，然后使用 document.querySelector 找到它，例如

在樹組件中：

   set selected(value: YourObjectType) {
                if (this._selected !== value) {
                  this._selected = value;

                  if (this._selected) {
                    //implement findallParents in your model, then expand tree up to the item to be selected
                    this._selected.findAllParents.forEach(m => this.treeControl.expand(m));
        //wait till all nodes are expanded - there might be a better way to do this
                    setTimeout(() => {
                      const element = document.querySelector('.selected-node');
                      if (element) {
                        element.scrollIntoView({behavior: 'smooth'});
                      }
                    });
                  }

                }
            }



      isSelected(node: YourObjectType) {
        return this._selected === node;
      }

在模板中：

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
              <mat-nested-tree-node *matTreeNodeDef="let node;">
                <li [ngClass]="{'selected-node': isSelected(node)}">
....