如何防止 Angular 中的多个订阅调用？

Question

我有一个消息服务，用于在各个组件之间进行交互。我只想在单击 Mine 按钮时触发一条消息。到目前为止这有效。但是当我单击 < 和 > 按钮时，它会触发 getMessage()，因此它会累加值。但我只想在单击 Mine 时发送一个值。仅最后一个值。单击 < 和 > 时如何防止触发 getMessage()？

当我点击 < 和 > 时，它会在卡片 1 和 10 之间切换。当我点击 Mine 时，它应该只会拿走我正在使用的卡片并将信息从该块发送到另一个组件。但是，当我单击 < 或 > 时，系统会调用 getMessage()，它会将所有卡片相加，直到我单击 Mine。我该如何防止呢？

遵循一些代码。我尽量保持紧凑：

留言-service.ts:

@Injectable({ providedIn: 'root' })
export class MessageService {
  private subject = new Subject<any>();

  sendMessage(message: string) {
    this.subject.next({ text: message });
  }

  getMessage(): Observable<any> {
    console.log('Get Message Message Service');
    return this.subject.asObservable();
  }

矿工-card.component:

  message: any;
  subscription: Subscription;

  constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
              private messageService: MessageService) {
    this.subscription = this.messageService.getMessage().subscribe(message => {
      console.log('Constructor miner-card'); // gets called multiple times, depending on how often I click < and >. When I click 10 times on < or > it will call this subscription 10 times.
    });
  }

当我点击 < 和 > 时，将调用这些函数：根据 minerCounter 的值，将显示卡片 1-10。

  precedingBlock() {
    this.minerCounter--;

    if (this.minerCounter < 1) {
      this.minerCounter = 10;
    }
  }

  nextBlock() {
    this.minerCounter++;

    if (this.minerCounter > 10) {
      this.minerCounter = 1;
    }
  }

带有 < 和 > 按钮的卡片的外观：

Mine 按钮：

Answer 1

检查您的订阅是否未定义。如果未定义，则只有订阅。

constructor(
private ref: ChangeDetectorRef,
private emitTransactionService: EmitTransactionService,
private messageService: MessageService
) {
if (!this.subscription) {
    this.subscription = this.messageService.getMessage().subscribe(message => {
      console.log('Constructor miner-card'); // gets called multiple times, depending on how often I click < and >. When I click 10 times on < or > it will call this subscription 10 times.
    });
  }
}

Answer 2

在您的 miner-card.component.ts 文件中使用 take(1)。这将仅从订阅中获取单个数据。

  message: any;
  subscription: Subscription;

  constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
              private messageService: MessageService) {
    this.subscription = this.messageService.getMessage().pipe(take(1)).subscribe(message => {
      console.log('Constructor miner-card'); // gets called multiple times, depending on how often I click < and >. When I click 10 times on < or > it will call this subscription 10 times.
    });
  }

希望对您有所帮助！

Answer 3

您应该始终unsubscribe ngOnDestroy 中的订阅。

  message: any;
  subscription: Subscription;

  constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
              private messageService: MessageService) {
    this.subscription = this.messageService.getMessage().subscribe(message => {
      console.log('Constructor miner-card'); // gets called multiple times, depending on how often I click < and >. When I click 10 times on < or > it will call this subscription 10 times.
    });
  }

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

如何防止 Angular 中的多个订阅调用？

How do I prevent multiple subscription calls in Angular?

angular

typescript

subscription