Question

我正在使用这个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中完成的。

Answer 1

在大型应用程序或处理大量可观察对象或主题或BehaviorSubjects的组件中，为避免出现诸如内存泄漏或系统速度减慢之类的问题，最好在离开组件时取消订阅可观察对象。 / p>


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

也不要忘记对类实现OnDestroy。

export MyComponent实现OnInit，OnDestroy

我真正喜欢的另一种好方法是，您可以在处理订阅时使用它；您可以在其中提供以下主题：

private onDestroy $：主题=新的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 来管理状态并统一应用程序中的事件；这将使您免于烦恼，并使您的应用程序保持在标准架构中。

Answer 2

看着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即可退出页面。也许在ionViewWillLeave，ionViewWillUnload或ngOnDestroy上。更改src的值应触发ngOnChanges中的PdfViewerComponent，然后调用loadPDF()。

让我知道对您有用的东西。

Answer 3

只需实现OnDestroy并在组件中定义一个名为ngOnDestroy的方法即可。在此处理正在进行的工作的清理/取消。每当从DOM中删除任何组件时，都会自动调用此方法。

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

    ngOnDestroy() {
       // do the work here
    }

    //...
}

Answer 4

您有两种选择：取消订阅 ngOnDestroy 或使用 TakeWhile < / p>

ngOnDestroy（）：在Angular销毁指令/组件之前进行清理。取消订阅可观察对象并分离事件处理程序，以避免内存泄漏。

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

TakeWhile 镜像源Observable，直到您指定的某些条件变为false为止，此时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;
      }
    }

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

4 个答案: