J'ai un service de messagerie, pour interagir entre différents composants. Je veux juste déclencher un message, lorsque je clique sur le bouton Lorsque je clique sur Suite à un code. J'ai essayé de le garder compact: Message-service.ts: Miner-card.component: Mine . Cela fonctionne jusqu'à présent. Mais quand je clique sur le bouton et > , cela déclenche getMessage () , pour qu'il additionne les valeurs. Mais je veux juste envoyer une valeur, quand je clique sur Mine . La dernière valeur uniquement. Comment éviter de déclencher getMessage () , en cliquant sur et > ? et > il bascule entre les cartes de 1 à 10. Lorsque je clique sur Mine il ne doit prendre que la carte sur laquelle je suis et envoyer les informations depuis ce bloc à un autre composant. Mais à la place, lorsque je clique sur ou > , getMessage () est appelé et il ajoute toutes les cartes jusqu'à ce que je clique sur Mine . Comment éviter cela? precedingBlock() {
this.minerCounter--;
if (this.minerCounter < 1) {
this.minerCounter = 10;
}
}
nextBlock() {
this.minerCounter++;
if (this.minerCounter > 10) {
this.minerCounter = 1;
}
}
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.
});
}
3 Réponses :
vérifiez si votre abonnement n'est pas défini ou non. Si non défini, alors abonnez-vous.
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.
});
}
}
Buddy, vous devriez probablement envisager de créer un StackBlitz. Cela nous aidera à résoudre votre problème plus tôt.
Dans votre fichier miner-card.component.ts , utilisez take (1) . cela n'obtiendra qu'une seule donnée de l'abonnement.
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.
});
}
J'espère que cela vous aidera!
J'ai importé import {take} de 'rxjs / operators'; et avoir le même code que vous pour le moment. Mais il dit que la fonction non résolue prend (1).
si vous utilisez la dernière version de rxjs, vous devez utiliser pipe. vérifier la réponse mise à jour
Vous devez toujours vous désinscrire de l'abonnement dans 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();
}
J'ai déjà utilisé ça aussi. Si je clique 5 fois sur
avez-vous essayé de vous désabonner de l'abonnement sur ngOnDestroy
Oui merci. Écrivez cela dans votre réponse et je vous donnerai la coche verte :)
L'opérateur take (1) résoudra votre problème utilisez que dans subscribe
pouvez-vous également ajouter la fonction que vous appelez lorsque vous cliquez sur
<ou>?