angular - 将组件留给另一个组件时取消后台进程？

Question

我正在使用这个库:

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

我已经创建了一个包含我的问题示例的存储库。

https://github.com/YeisonVelez11/pdf

我正在生成 pdf，效果很好。但是如果 pdf 尚未完成加载并且我导航到另一个组件，则会出现错误。

基本上，当我返回预览时，我会遇到一个问题，因为无法取消正在加载的 pdf。不知道有什么技巧可以随时退出文档 View 。

  <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 中。

Answer 1

在处理大量可观察对象或主题或行为对象的大型应用程序或组件中，最好在离开组件时取消订阅可观察对象，以防止出现内存泄漏或降低系统速度等问题。

 ngOnDestroy(){
   this.ObservableOrSubsject1$.unsubscribe();
   this.ObservableOrSubsject2$.unsubscribe();
   ....
 }

也不要忘记为类实现 OnDestroy。

export MyComponent implements OnInit, OnDestroy

还有另一种我真正喜欢的好方法，您可以在处理订阅时使用它；您可以在其中提供一个主题，例如:

private onDestroy$: Subject = new Subject();

并且当使用任何带有 takeUntil 的可观察(例如:映射或订阅)管道时:

ngOnInit(){
   this.ObservableOrSubsject1
     .pipe(takeUntil(this.onDestroy$))
     .subscribe((result: IResult) => {
       this.result= Object.assign({}, result);
   });

在 ngOnDestroy 中只需传递“this.onDestroy$.next()”:

ngOnDestroy(){
   this.onDestroy$.next();
 }

同样，不要忘记对类实现 OnDestroy。

最后，我建议使用 Ngrx/Store 和 Ngrx/Effects 来管理您的状态并统一应用程序中的事件；这将使您免于许多麻烦，并使您的应用程序保持在标准架构中。