在指令实例上应用方法

Question

在Angular 6中，我得到了多个使用drag-scroll指令的元素。

一切正常，但是我想添加一些按钮，这些按钮可以滚动给定的实例，而不是全部：）

如何将moveLeft（）和moveRight（）fn寻址到特定指令实例？我试图使用@ViewChildren，但这会访问forEach中的所有实例。

将使用滚动的行数将是动态的，因此我不想为它们提供任何ID。

  <!-- FIRST ROW -->
         <div class="dragscroll" dragScroll scrollbar-hidden="true" 
 drag-scroll-y-disabled="true">
             <div>
               <img src="/freeze_frame_image_692.png"> 
               <img src="/freeze_frame_image_692.png"> 
               <img src="/freeze_frame_image_692.png"> 
             </div>
             <div>
                <button class="prev-exercise"(click)="moveLeft($event)">Prev</button>
                 <button class="next-exercise" (click)="moveRight($event)">Next</button>
             </div>
         </div>

  <!-- Second ROW -->
         <div class="dragscroll" dragScroll scrollbar-hidden="true" drag-scroll-y-disabled="true">
             <div>
               <img src="/freeze_frame_image_692.png"> 
               <img src="/freeze_frame_image_692.png"> 
               <img src="/freeze_frame_image_692.png"> 
             </div>
             <div>
                <button class="prev-exercise"(click)="moveLeft($event)">Prev</button>
                 <button class="next-exercise" (click)="moveRight($event)">Next</button>
             </div>
         </div>

  <!-- Third ROW -->
         <div class="dragscroll" dragScroll scrollbar-hidden="true" drag-scroll-y-disabled="true">
             <div>
               <img src="/freeze_frame_image_692.png"> 
               <img src="/freeze_frame_image_692.png"> 
                <img src="/freeze_frame_image_692.png"> 
             </div>
             <div>
                <button class="prev-exercise"(click)="moveLeft($event)">Prev</button>
                <button class="next-exercise" (click)="moveRight($event)">Next</button>
             </div>
         </div>

这是ts文件

import { Component, OnInit, AfterViewInit, ViewChildren, Input, QueryList } from '@angular/core';
import { DragScrollModule, DragScrollDirective } from 'ngx-drag-scroll';
@Component({
  selector: 'program-list',
  templateUrl: './program-list.component.html',
  styleUrls: ['./program-list.component.scss']
})

export class ProgramListComponent implements AfterViewInit {

  programs: any;


  @ViewChildren(DragScrollDirective) ds: QueryList<DragScrollDirective>;

  constructor() {
  }

  ngAfterViewInit() {
    this.ds.forEach((dragel) => {
    dragel.scrollbarHidden = true;
    });
  }
  moveLeft(event) {
    this.ds.forEach((dragel) => {
      dragel.moveLeft();
    });
  }

  moveRight() {
    this.ds.forEach((dragel) => {
    dragel.moveRight();
    });
  }

}