Question

我是rxjs的新手，并且正在开发一个有角度的多选列表组件，该组件应呈现一长串值（超过500个）。我正在根据UL渲染列表，正在遍历可渲染LI的可观察对象。我正在考虑我的选择，以避免通过一次渲染所有元素来影响性能。但是我不知道这是否可行，是否有可能使用最佳运算符。

建议的解决方案：

在初始化时，我将所有数据加载到一个Observable中。（src），然后从中获取100个元素，并将其放在可观察的目标中（将用于呈现列表的一个元素）
每次用户到达列表末尾时（scrollEnd事件将触发），我将再加载100个元素，直到src中没有可观察到的值为止。
scrollEnd事件将触发目标可观察到的新值。

在下面找到我的代码，我仍然需要实现建议的解决方案，但此时此刻我被困住了。

编辑：我正在实现@martin解决方案，但仍无法使其在我的代码中正常工作。我的第一步是将其复制到代码中，以获取记录的值，但是可观察对象将立即完成而不会产生任何值。我没有触发事件，而是添加了一个主题。每当scrollindEnd输出发出时，我都会向主题推送一个新值。模板已被修改以支持此操作。

multiselect.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { zip, Observable, fromEvent, range } from 'rxjs';
import { map, bufferCount, startWith, scan } from 'rxjs/operators';
import { MultiSelectService, ProductCategory } from './multiselect.service';

@Component({
  selector: 'multiselect',
  templateUrl: './multiselect.component.html',
  styleUrls: ['./multiselect.component.scss']
})
export class MultiselectComponent implements AfterViewInit {

  SLICE_SIZE = 100;
  loadMore$: Observable<Event>;
  numbers$ = range(450);

  constructor() {}


  ngAfterViewInit() {
    this.loadMore$ = fromEvent(document.getElementsByTagName('button')[0], 'click');

    zip(
      this.numbers$.pipe(bufferCount(this.SLICE_SIZE)),
      this.loadMore$.pipe(),
    ).pipe(
      map(results => console.log(results)),
    ).subscribe({
      next: v => console.log(v),
      complete: () => console.log('complete ...'),
    });
  }

}

multiselect.component.html

<form action="#" class="multiselect-form">
  <h3>Categories</h3>
  <input type="text" placeholder="Search..." class="multiselect-form--search" tabindex="0"/>
  <multiselect-list [categories]="categories$ | async" (scrollingFinished)="lazySubject.next($event)">
  </multiselect-list>
  <button class="btn-primary--large">Proceed</button>
</form>

multiselect-list.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'multiselect-list',
  templateUrl: './multiselect-list.component.html'
})
export class MultiselectListComponent {
  @Output() scrollingFinished = new EventEmitter<any>();
  @Input() categories: Array<string> = [];

  constructor() {}

  onScrollingFinished() {
    this.scrollingFinished.emit(null);
  }
}

multiselect-list.component.html

<ul class="multiselect-list" (scrollingFinished)="onScrollingFinished($event)">
  <li *ngFor="let category of categories; let idx=index" scrollTracker class="multiselect-list--option">
    <input type="checkbox" id="{{ category }}" tabindex="{{ idx + 1 }}"/>
    <label for="{{ category }}">{{ category }}</label>
  </li>
</ul>

注意：：scrollingFinished事件由保存跟踪逻辑的scrollTracker指令触发。我正在将事件从multiselect-list冒泡到multiselect组件。

谢谢！

Answer 1

此示例生成一个包含450个项目的数组，然后将它们拆分为100的块。它首先转储前100个项目，每单击一次按钮，它又取一个100并将其附加到以前的结果中。加载所有数据后，此链正确完成。

我认为您应该能够将此并用于解决您的问题。只需单击Subject即可，而不是单击按钮，它会在用户每次滚动到底部时发出：

import { fromEvent, range, zip } from 'rxjs'; 
import { map, bufferCount, startWith, scan } from 'rxjs/operators';

const SLICE_SIZE = 100;

const loadMore$ = fromEvent(document.getElementsByTagName('button')[0], 'click');
const data$ = range(450);

zip(
  data$.pipe(bufferCount(SLICE_SIZE)),
  loadMore$.pipe(startWith(0)),
).pipe(
  map(results => results[0]),
  scan((acc, chunk) => [...acc, ...chunk], []),
).subscribe({
  next: v => console.log(v),
  complete: () => console.log('complete'),
});

实时演示：https://stackblitz.com/edit/rxjs-au9pt7?file=index.ts

如果您担心性能，则应将trackBy用于*ngFor，以避免重新呈现现有DOM元素，但我想您已经知道了。

Answer 2

这里是live demo on Stackblitz。

如果您的组件订阅了要显示的整个列表的可观察对象，则您的服务将必须保留此整个列表，并在每次添加项目时发送一个新列表。这是使用此模式的实现。由于列表是通过引用传递的，因此可观察对象中推送的每个列表都只是引用，而不是列表的副本，因此发送新列表并不是一项昂贵的操作。

对于服务，请使用BehaviorSubject将新项注入到可观察项中。您可以使用其asObservable()方法从中获得可观察的东西。使用另一个属性保存您的当前列表。每次调用loadMore()时，请在列表中推送新项目，然后在主题中推送此列表，这也将其推送到可观察对象中，并且组件将重新呈现。

在这里，我从一个包含所有项目（allCategories）的列表开始，每次调用loadMore()时，如果使用Array.splice()将100个项目的块放在当前列表中，：

@Injectable({
  providedIn: 'root'
})
export class MultiSelectService {
  private categoriesSubject = new BehaviorSubject<Array<string>>([]);
  categories$ = this.categoriesSubject.asObservable();
  categories: Array<string> = [];
  allCategories: Array<string> = Array.from({ length: 1000 }, (_, i) => `item #${i}`);

  constructor() {
    this.getNextItems();
    this.categoriesSubject.next(this.categories);
  }

  loadMore(): void {
    if (this.getNextItems()) {
      this.categoriesSubject.next(this.categories);
    }
  }

  getNextItems(): boolean {
    if (this.categories.length >= this.allCategories.length) {
      return false;
    }
    const remainingLength = Math.min(100, this.allCategories.length - this.categories.length);
    this.categories.push(...this.allCategories.slice(this.categories.length, this.categories.length + remainingLength));
    return true;
  }
}

然后，当到达底部时，通过loadMore()组件在服务上调用multiselect方法：

export class MultiselectComponent {
  categories$: Observable<Array<string>>;

  constructor(private dataService: MultiSelectService) {
    this.categories$ = dataService.categories$;
  }

  onScrollingFinished() {
    console.log('load more');
    this.dataService.loadMore();
  }
}

在multiselect-list组件中，将scrollTracker伪指令放置在包含ul的地方，而不要放置在li上：

<ul class="multiselect-list" scrollTracker (scrollingFinished)="onScrollingFinished()">
  <li *ngFor="let category of categories; let idx=index"  class="multiselect-list--option">
    <input type="checkbox" id="{{ category }}" tabindex="{{ idx + 1 }}"/>
    <label for="{{ category }}">{{ category }}</label>
  </li>
</ul>

为了检测滚动到底部并仅触发一次事件，请使用以下逻辑来实现您的scrollTracker指令：

@Directive({
  selector: '[scrollTracker]'
})
export class ScrollTrackerDirective {
  @Output() scrollingFinished = new EventEmitter<void>();

  emitted = false;

  @HostListener("window:scroll", [])
  onScroll(): void {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight && !this.emitted) {
      this.emitted = true;
      this.scrollingFinished.emit();
    } else if ((window.innerHeight + window.scrollY) < document.body.offsetHeight) {
      this.emitted = false;
    }
  }
}

希望有帮助！

从Observable中获取N个值，直到根据事件完成为止。延迟加载多选列表

2 个答案: