Как использовать горизонтальную виртуальную прокрутку с методом scrollTo в пользовательском интерфейсе Angular Материал? - PullRequest
0 голосов
/ 13 марта 2020

Я недавно начал использовать Angular Материал. Я не могу понять, как использовать scrollTo или я должен использовать другой метод. Я не смог найти пример кода. Мне нужно добавить 2 кнопки, чтобы прокрутка работала, нажимая влево и вправо, чтобы она выглядела как карусель. Пожалуйста, помогите мне, скажите мне, что мне нужно сделать, чтобы это сработало.

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } 
                        from '@angular/core';
import { BecomeAMemberScrollingService }
                        from '../service/become-a-member-scrolling.service';

@Component({
  selector: 'virtual-scroll',
  template: '<h2 class="reviews__title title">Reviews</h2>
             <div class="virtual-scroll-data">
               <cdk-virtual-scroll-viewport orientation="horizontal" itemSize="50" 
                                                          class="scroll-viewport">
                 <div *cdkVirtualFor="let item of items; index as i" 
                              class="scroll-data-item">{{i+1 + '. ' + item}}</div>
               </cdk-virtual-scroll-viewport>
             </div>
             <div>
               <button (click)="">Left</button>
               <button (click)="">Right</button>
             </div>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BecomeAMemberScrollingComponent implements OnInit {
  public items: any[];

  constructor(private cdrf: ChangeDetectorRef,
              private scrollingData: BecomeAMemberScrollingService ) {
  }

  ngOnInit(): void {
    this.scrollingData.getDataScrolling().subscribe(data => {
      this.items = data;
    });
  }
}


import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';


@Injectable()
export class BecomeAMemberScrollingService {
  public getDataScrolling(): Observable<any[]> {
    const p = 'Lorem ipsum dolor sit amet,' +
      ' consectetur adipiscing elit, ' +
      'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' +
      'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ' +
      'nisi ut aliquip ex ea commodo consequat.';
    const arr = [];
    for (let i = 0; i < 100; i++) {
      arr.push(p);
    }
    return  of(arr);
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...