在 Mat-Select 中滚动到 Mat-0 选项的末尾时触发事件：Angular 6

Question

我最近开始修改一个基于 Angular 6 的项目并遇到了一些问题。 所以，我有（假设）4 个 Mat-Select 字段，分别用于 Language、Currency、Country 和 Organization。

最初所有的下拉菜单都有 10 个默认值，我通过调用 API 来获取。 我的要求是在用户滚动到选择下拉菜单时打开的 Mat-Options 框的末尾时再进行一次 API 调用。

我曾提到This Question，它工作正常，但有一些问题，我注意到了。该答案涵盖了一个领域的解决方案。 如果我们使用多个字段，是否必须重复代码？

这里是 HTML

            <mat-select [disabled]="isDisabled" [(ngModel)]="model.currency" name="currency" (selectionChange)="OnChange('currency',$event.value)" #currency>   
              <mat-option [value]="getCurrency.currencyCode" *ngFor="let getCurrency of fetchCurrency | 
                    filternew:searchCurrencyvaluedrop">{{ getCurrency.currencyDescription }}
              </mat-option>
            </mat-select>

          <mat-select [disabled]="isDisabled" [(ngModel)]="model.language" name="language"
                (selectionChange)="OnChange('language', $event.value)" #language>                      
            <mat-option [value]="getLanguage.languageDescription" *ngFor="let getLanguage of fetchLanguage | 
                  filternew:searchLanguagevaluedrop">{{ getLanguage.languageDescription }}</mat-option>
          </mat-select>

为了简单起见，我只添加了两个字段。以下是 .ts 中的代码：

  viewIndex = 0;
  windowSize = 10;
  private readonly PIXEL_TOLERANCE = 3.0;

  ngAfterViewInit() {
    this.selectElemCu.openedChange.subscribe((event) =>
      this.registerPanelScrollEventCurrency(event)
    );
    this.selectElem.openedChange.subscribe((event) =>
      this.registerPanelScrollEventLang(event)
    );
}


//for language field

  registerPanelScrollEventLang(e) {
    if (e) {
      const panel = this.selectElem.panel.nativeElement;
      panel.addEventListener('scroll', event => this.loadNextOnScrollLang(event, this.selectElem.ngControl.name));
    }
  }

  loadNextOnScrollLang(event, select_name) {
    if (this.hasScrolledToBottomLang(event.target)) {
      this.viewIndex += this.windowSize;
      this.modifyPageDetails(select_name)
      this.appService.getAllLanguages(this.standardPageSizeObj, resp => {
        console.log('list of languages', resp)
        this.fetchLanguage.push(...resp['data'])
      }, (error) => {
      });
    }
  }

  private hasScrolledToBottomLang(target): boolean {
    return Math.abs(target.scrollHeight - target.scrollTop - target.clientHeight) < this.PIXEL_TOLERANCE;
  }

货币下拉代码保持不变。 所以，重复是我的第一个问题。第二个是滚动，有两个 API 调用而不是一个。我可以忍受，但因为有 6 个字段，所以重复太多了。

由于某些安全限制，我什至不能使用外部库。有没有更好的方法来实现这一点。如果需要进一步说明，请告诉我。谢谢

Answer 1

你可以这样做：

第 1 步

对于每个mat-select，您应该使用ViewChild 创建一个局部变量。

@ViewChild('select_1', { static: false }) select_1: MatSelect;
@ViewChild('select_2', { static: false }) select_2: MatSelect;
@ViewChild('select_3', { static: false }) select_3: MatSelect;
@ViewChild('select_4', { static: false }) select_4: MatSelect;

第 2 步

创建一个在任何下拉菜单打开时都会触发的函数。您可以使用(openedChange) 事件发射器并检查它的事件值是true。函数的第二个参数可以是打开的下拉菜单，所以我们没有每个下拉菜单的重复代码。

<mat-form-field>
  <mat-select placeholder="Select 1" #select_1 (openedChange)="onOpenedChange($event, 'select_1')">
    <mat-option *ngFor="let item of select_1_options;">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

第 3 步

定义将在openedChange 事件上触发的onOpenedChange() 函数。该函数应该检查下拉列表的panel 的scrollTop 是否等于（scrollHeight-offsetHeight），因为这意味着用户滚动到滚动条的底部。发生这种情况时，您可以调用 API。

onOpenedChange(event: any, select: string) {
  if (event) {
    this[select].panel.nativeElement.addEventListener('scroll', (event: any) => {
      if (this[select].panel.nativeElement.scrollTop === this[select].panel.nativeElement.scrollHeight - this[select].panel.nativeElement.offsetHeight) {
        console.log(`Call API for ${select}`);
      }
    });
  }
}

这是工作代码：https://stackblitz.com/edit/angular-ivy-xritb1?file=src%2Fapp%2Fapp.component.ts

Answer 2

我们可以创建一个指令来为我们处理这个滚动逻辑，并且我们可以防止代码重复。

这是一个演示：https://stackblitz.com/edit/angular-ivy-m2gees?file=src/app/mat-select-bottom-scroll.directive.ts

这里有一个简短的解释：

创建一个自定义指令并在其中获取MatSelect 的引用。

import {Directive,ElementRef,EventEmitter,Input,OnDestroy,Output} from '@angular/core';
import { MatSelect } from '@angular/material/select/';
import { fromEvent, Subject } from 'rxjs';
import { filter, switchMap, takeUntil, throttleTime } from 'rxjs/operators';

@Directive({
  selector: '[appMatSelectScrollBottom]'
})
export class MatSelectScrollBottomDirective implements OnDestroy {
  private readonly BOTTOM_SCROLL_OFFSET = 25;
  @Output('appMatSelectScrollBottom') reachedBottom = new EventEmitter<void>();
  onPanelScrollEvent = event => {};
  unsubscribeAll = new Subject<boolean>();

  constructor(private matSelect: MatSelect) {
    this.matSelect.openedChange
      .pipe(filter(isOpened => !!isOpened),
        switchMap(isOpened =>fromEvent(this.matSelect.panel.nativeElement, 'scroll').pipe(throttleTime(50))), //controles the thrasold of scroll event
        takeUntil(this.unsubscribeAll)
      )
      .subscribe((event: any) => {
        console.log('scroll');
        // console.log(event, event.target.scrollTop, event.target.scrollHeight);
        if (
          event.target.scrollTop >= (event.target.scrollHeight - event.target.offsetHeight - this.BOTTOM_SCROLL_OFFSET)) {
          this.reachedBottom.emit();
        }
      });
  }
  ngOnDestroy(): void {
    this.unsubscribeAll.next(true);
    this.unsubscribeAll.complete();
  }
}

一旦滚动到达底部，该指令将发出一个事件。

我们从openedChange 事件开始，然后我们将switchMaped 到选择面板的滚动事件中。 SwitchMap 将在新的 open 事件触发时自动取消订阅旧的滚动事件。

在你的组件中使用这个指令来监听事件，如下所示。

<mat-form-field>
  <mat-select placeholder="Choose a Doctor" (openedChange)="!$event && reset()"
    (appMatSelectScrollBottom)="loadAllOnScroll()"><!-- liste to the event and call your load data function -->
    <mat-option *ngFor="let dr of viewDoctors;let i = index">{{dr}}</mat-option>
  </mat-select>
</mat-form-field>