Как предотвратить множественные звонки по подписке в Angular?

Question

У меня есть служба сообщений, чтобы взаимодействовать между различными компонентами.Я просто хочу вызвать сообщение, когда нажимаю кнопку Mine.Это работает до сих пор.Но когда я нажимаю кнопку < и >, она вызывает getMessage(), так что складываются значения.Но я просто хочу отправить одно значение, когда я нажимаю Mine.Только последнее значение.Как запретить запуск getMessage(), при нажатии на < и >?

Когда я нажимаю < и >, он переключается между карточками с 1 на 10. Когда янажмите Mine, чтобы взять только ту карту, на которой я работаю, и отправить информацию из этого блока в другой компонент.Но вместо этого, когда я нажимаю < или >, вызывается getMessage(), и он складывает все карты, пока я не нажму Mine.Как мне это предотвратить?

После некоторого кода.Я пытался сохранить его компактным:

Message-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();
  }

Miner-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

В вашем 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 2

Вы всегда должны 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();
}

Answer 3

проверьте, если ваша подписка не определена или нет.Если не определено, только тогда подпишитесь.

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.
    });
  }
}