Как установить счетчик на наблюдателе пересечения при прокрутке вниз с помощью углового мгновенного поиска - PullRequest
0 голосов
/ 06 июня 2019

Я пытаюсь настроить бесконечный свиток с помощью углового мгновенного поиска.Где мне нужно настроить загрузочные счетчики на основе значения bool, испускаемого Intersection Observers?

Я уже пытался создать новый компонент и добавил его в качестве загрузочного счетчика

Воткод для директивы Intersection Observer:

@Output() public onVisible: EventEmitter<any> = new EventEmitter();

  private _intersectionObserver?: IntersectionObserver;

  constructor(private _element: ElementRef) {}

  public ngAfterViewInit() {
    this._intersectionObserver = new IntersectionObserver(entries => {
      this.checkForIntersection(entries);
    }, {});
    this._intersectionObserver.observe(<Element>this._element.nativeElement);
  }

  public ngOnDestroy() {
    this._intersectionObserver.disconnect();
  }

  private checkForIntersection = (
    entries: Array<IntersectionObserverEntry>
  ) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
      const isIntersecting =
        (<any>entry).isIntersecting &&
        entry.target === this._element.nativeElement;

      if (isIntersecting) {
        this.onVisible.emit();
      }
    });
  };

В моем Html, использующем Infinite Hits:

 <ais-infinite-hits>
     <ng-template
       let-hits="hits"
       let-results="results"
       let-refine="showMore">
       <div *ngIf="hits.length === 0" class="hits__not-found">
          <h6><strong>No Data Found</strong></h6>
       </div>

       <div *ngFor="let hit of hits" class="hits__content">
           <ion-card
             class="hits__list ion-activatable"
             (click)="showData(hit)"
           >
           <div (onVisible)="refine()"></div>
       </div>
     </ng-template>
 </ais-infinite-hits>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...