Question

我在子组件中有一个按钮，当点击它时会触发加载器。和 Observable 在父组件中，我想在加载 Pdf 时停止加载器

执行的子组件：

<nsnet-loader *ngIf="pdfLoading"></nsnet-loader>
<button
(click)="triggerLoader()"
[ngClass]="{'is-not-loading': !pdfLoading}"
>
<span>Download</<span>
</button>

export class ButtonDownloadComponent implements OnChanges {
  @Input() check = false;
  pdfLoading = false;

  triggerLoader() {
   this.pdfLoading = true;
  }

 ngOnChanges(changes: SimpleChanges): void {
  if (this.check) {
    this.pdfLoading = false;
  }
 }
}

和父组件

...
<button-download
(click)="getUrl(devis)"
[check]="stopLoader()"
>
</button-download>
...

stopLoader(): boolean {
  return true;
}

getUrl(devis: Devis) {
 
 setTimeout(() => { this.stopLoader() }, 2000)

 this.xxx.subscribe((res: Blob) => {
  // some logics
  this.stopLoader();
 }
}

我不明白为什么它不起作用...加载程序仍在运行

Answer 1

你的父母正在订阅一些东西......但是什么？我在孩子身上看不到一个主题或可观察的对象。或 .next()。这里有些不对劲。

在 Child 中，设置一个要观察的 Subject

import { Subject } from 'rxjs';

export class ButtonDownloadComponent implements OnChanges {
  @Input() check = false;
  pdfLoading = false;
  loaded$ = new Subject<Blob>

  triggerLoader() {
   this.pdfLoading = true;
  }

 ngOnChanges(changes: SimpleChanges): void {
  if (this.check) {
    this.pdfLoading = false;
    loaded$.next(this.res); // you are passing a blob back to parent, so whatever that value is here
  }
 }
}

在 Parent 中订阅 Subejct 并取消订阅 onDestroy

import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';

loadedSub: Subscription;

stopLoader(): boolean {
  return true;
}

getUrl(devis: Devis) {
 setTimeout(() => { this.stopLoader() }, 2000)
 loadedSub = this.xxx.subscribe((res: Blob) => {
  // some logics
  this.stopLoader();
 }
}

ngOnDestroy() {
   loadedSub.unsubscribe()
}

Angular：从父组件更新子布尔组件

1 个答案: