Материал Угловая прокрутка до элемента в мат-листе - PullRequest
Новая
       6

Материал Угловая прокрутка до элемента в мат-листе

0 голосов
/ 22 января 2019

У меня есть список угловых материалов с несколькими элементами, где можно выбрать один из них.

Когда я загружаю этот список, я хочу прокрутить список до выбранного элемента, чтобы сделать его более видимым. Есть ли вариант?

Я думал о чем-то вроде в ngOnInit, чтобы проверить, выбран ли элемент, но я действительно не знаю, как прокрутить этот список до этого элемента.

Примечание: прокручивать не всю страницу, только элементы в списке.

component.html 

<mat-nav-list>
    <mat-list-item *ngFor="let item of items" (click)="itemClick(item)"
        [ngClass]="item.selectedClass">
        {{item.someValue}}
    </mat-list-item>
</mat-nav-list>

component.ts 

private itemClick(item: Item): Observable<any> {
    if (item) {
        this.something = item;
        this.items.forEach(item => {
            if (item && item.name === item.name) {
                item["selectedClass"] = "item-selected";
            } else {
                item["selectedClass"] = undefined;
            }
        });
    } else {
        this.something = null;
        this.items.forEach(item => {
                item["selectedClass"] = undefined;
        });
    }

    return of(null);
}

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Проверьте это демо: https://stackblitz.com/edit/angular-yjbpoq?file=src%2Fapp%2Fhello.component.ts

Суть в том, что вы присоединяете новую директиву к вашему списку и к каждому из элементов списка: 

<mat-list appScrollable ...>
  <mat-list-item appOffsetTop ...>
  ...
  </mat-list-item>
</mat-list>

Один из списка может установить scrollTop (или использовать scrollTo, или что-то еще) для списка: 

@Directive({selector: '[appScrollable]'})
export class ScrollableDirective {
  constructor(private _el: ElementRef) {}
  set scrollTop(value: number) { this._el.nativeElement.scrollTop = value; }
}

А тот, кто находится в списке, может сообщить свои offsetTop s: 

@Directive({ selector: '[appOffsetTop]'})
export class OffsetTopDirective {
  constructor(private _el: ElementRef) { }
  get offsetTop(): number { return this._el.nativeElement.offsetTop; }
}

Каждый тип директивы доступен в компоненте через @ViewChild и @ViewChildren: 

  @ViewChildren(OffsetTopDirective) listItems: QueryList<OffsetTopDirective>;
  @ViewChild(ScrollableDirective) list: ScrollableDirective;

В хуке жизненного цикла AfterViewInit ищется список элементов, который соответствует текущему выбранному элементу (здесь устанавливается случайным образом в целях иллюстрации). scrollTop списка затем устанавливается на offsetTop этого элемента: 

  // Inside your component
  selectedItem = Math.floor(Math.random() * 500);
  items = new Array(500).fill(0).map((_, i) => `Item ${i}`);

  ngAfterViewInit() {
    this.list.scrollTop = this.listItems.find((_, i) => i === this.selectedItem).offsetTop;
  }
0 голосов
/ 22 января 2019

Трудно без кода, но вы можете дать всем своим элементам ID, например,

Затем с помощью ngOnInit вы можете проверить выбранный элемент, выбрать элемент DOM с помощью document.getElementById('listelement'+elementid) и просмотреть его. Классический способ JS сделать это будет element.scrollIntoView();

...