Отменить фоновый процесс при переходе от одного компонента к другому?

Я использую этот libray:

https://github.com/VadimDez/ng2-pdf-viewer

Я создал хранилище с примером моей проблемы.

Я создаю PDF, и это работает хорошо. но если PDF не закончил загрузку, и я перехожу к другому компоненту, я получаю сообщение об ошибке.

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

  <pdf-viewer [src]="archivo_adjunto"
              *ngIf="archivo_adjunto"
              [render-text]="false"
              [original-size]="true"
              [page]="1"
              [autoresize]="true"
              [show-all]="true"
              style="display: block;"
              (page-rendered)="pageRendered($event)"
  ></pdf-viewer>

ionViewDidLoad() {
this.archivo_adjunto="./assets/documents/Resumen Ejecutivo Autoevaluacion.pdf"

}

Это сделано в Ionic, но функциональность в Angular.

Ответ 1

Просмотр ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.component.ts,

@Input() src проверяется в loadPDF():

private loadPDF() {
    if (!this.src) {
      return;
    }
[. . .]
}

И этот метод вызывается для события ngOnChanges.

  ngOnChanges(changes: SimpleChanges) {
    if (isSSR()) {
      return;
    }

    if ('src' in changes) {
      this.loadPDF();
    } else if [. . .]
  }

Я полагаю, что вам просто нужно изменить значение для src, которое в настоящее время находится в archivo_adjunto, на undefined или null в одном из событий жизненного цикла ionic при выходе из страницы. Возможно на ionViewWillLeave, ionViewWillUnload или на ngOnDestroy. Изменение значения src должно вызвать ngOnChanges в PdfViewerComponent, который затем вызывает loadPDF().

Дайте мне знать, что сработало для вас.

Ответ 2

Просто реализуйте OnDestroy и определите метод с именем ngOnDestroy в вашем компоненте. Обработайте очистку/отмену текущей работы там. Этот метод будет вызываться автоматически при удалении любого компонента из DOM.

export class MyComponent implements OnDestroy() {
    //...

    ngOnDestroy() {
       // do the work here
    }

    //...
}

Ответ 3

У вас есть два варианта: отписаться в ngOnDestroy или использовать TakeWhile

ngOnDestroy(): Очистка перед тем, как Angular уничтожит директиву/компонент. Отмените подписку на наблюдаемые и отсоедините обработчики событий, чтобы избежать утечек памяти.

ngOnDestroy() {
  this.subscription.unsubscribe();
}

TakeWhile зеркально отображает источник Observable до тех пор, пока указанное вами условие не станет ложным, после чего TakeWhile прекратит зеркально отображать источник Observable и завершит свою собственную Observable.

export class CounterTakeWhileComponent implements OnInit, OnDestroy {

  count: number;
  counter: Observable<number>;

  private alive = true;

  ngOnInit() {
    console.log('[takeWhile] ngOnInit');

    this.counter = new Observable<number>(observer => {
      console.log('[takeWhile] Subscribed');

      let index = -1;
      const interval = setInterval(() => {
        index++;
        console.log('[takeWhile] next: ${index}');
        observer.next(index);
      }, 1000);

      // teardown
      return () => {
        console.log('[takeWhile] Teardown');
        clearInterval(interval);
      }
    });

    this.counter
    .pipe(takeWhile(() => this.alive))
    .subscribe(
      (value) => this.count = value,
      (error) => console.error(error),
      () => console.log('[takeWhile] complete')
    );
  }
      ngOnDestroy() {
        console.log('[takeWhile] ngOnDestory');
        this.alive = false;
      }
    }