typescript - Hur förhindrar jag flera prenumerationsanrop i Angular?

Jag har en meddelandetjänst för att interagera mellan olika komponenter. Jag vill bara utlösa ett meddelande när jag klickar på Mine-knappen. Detta fungerar hittills. Men när jag klickar på < och >-knappen, utlöser det getMessage(), så att det lägger ihop värden. Men jag vill bara skicka ett värde när jag klickar på Mine. Endast det senaste värdet. Hur förhindrar jag att getMessage() utlöses när jag klickar på < och >?

När jag klickar på < och > växlar det mellan korten från 1 till 10. När jag klickar på Mine ska det bara ta kortet jag befinner mig på och skicka informationen från det blocket till en annan komponent. Men istället, när jag klickar på < eller >, blir getMessage() kallad och den summerar alla kort tills jag klickar på Mine. Hur kan jag förhindra det?

Följande kod. Jag försökte hålla den kompakt:

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

När jag klickar på < och > kallas dessa funktioner: Beroende på värdet av minerCounter visas kort 1-10.

  precedingBlock() {
    this.minerCounter--;

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

  nextBlock() {
    this.minerCounter++;

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

Hur kortet ser ut med < och >-knapparna:

Knappen Mine:

Svar #1

Du bör alltid unsubscribe prenumerationen i 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();
}

Svar #2

kontrollera om din prenumeration är odefinierad eller inte. Om den är odefinierad, prenumerera endast då.

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

Relaterade artiklar