1
votes

Bouton de création angulaire non cliquable?

J'ai besoin de désactiver un bouton, mais j'ai essayé plusieurs choses et elles ne fonctionnent pas et je dois rendre la base du bouton sur la condition non cliquable. comme:

this.reviewService.verifyUserHaveReviewToApp(this.app.appIdToSearch)
      .subscribe((res) => {
        this.existReview = res;
      });

mon bouton ressemble à ceci:

 <app-primary-button *ngIf="!userIsPartner || !isLogged"
        routerLink="{{getAddReviewLink()}}" 
        ng-disabled="existReview != false"
        matTooltip="{{ (!existReview ? 'apps.mouse-over-enabled' : 'apps.mouse-over-disable') | translate}}">
        Write review
      </app-primary-button>

Je donne la valeur booléenne dans ts:

 [disabled]="existReview != false" // this make the button disable but still if i click the buttons takes me to the page normaly
 [disabled]="!existReview" // doesn't work
 ng-disabled="!existReview"// doesn't work .

Avez-vous une idée de ce qui me manque, merci?

angular

9 commentaires

Quelle valeur booléenne avez-vous déclarée dans le fichier ts sur init

Veuillez fournir la classe et le modèle de votre composant

Êtes-vous sûr que res est un booléen? Avez-vous essayé de le connecter? console.log (res);

@PrashanthDamam J'ajoute dans la question la valeur booléenne.

yes est un booléen

@Sal this.existReview obtient la valeur correctement, le problème est de désactiver la liaison ou je ne sais pas

Si la valeur res est vraie, essayez d'utiliser [disabled] = existReview

Et il peut s'agir d'une erreur dans votre composant

oui je l'ai utilisé et explique dans la question que le bouton semble inactif mais si je clique, cela fonctionne normalement et dans ce cas, je ne veux pas que le bouton me dirige n'importe où

3 Réponses :

1
votes

Votre est un composant personnalisé. Il ne sait donc rien de certaines propriétés désactivées . Vous devez fournir cette propriété (vous pouvez la nommer comme vous voulez) et la transférer correctement sur le bouton interne (je suppose que vous l'avez à l'intérieur), par exemple:

@Component({
  selector: 'app-primary-button',
  template: `
     <button [disabled]="disabled">My real button</button>
  `
  })
export class PrimaryButton {
  /**
  * Provide an input for the property
  * and use it in the template
  */
  @Input() disabled = false; 
}

Alors vous serez capable d'utiliser votre bouton personnalisé comme

2 commentaires

ce composant l'a déjà sinon j'aurais obtenu et une erreur qui n'en faisait pas partie, ce que je dis, c'est que le bouton semble inactif mais si je clique dessus, il fait la même chose, avec cela, je ne change que la couleur du bouton

Veuillez fournir la classe et le modèle de votre PrimaryButton. L'exemple de StackBlitz serait plus que bienvenu

1
votes

Le problème ici n'est pas le [désactivé] , votre première utilisation est correcte. Le problème est que routerLink ne se soucie pas de l'attribut désactivé.

Pour contourner ce problème, vous pouvez avoir deux boutons:

<app-primary-button *ngIf="(!userIsPartner || !isLogged) && existReview"
    [disabled]="true"
    matTooltip="{{ (!existReview ? 'apps.mouse-over-enabled' : 'apps.mouse-over-disable') | translate}}">
    Write review
</app-primary-button>
<app-primary-button *ngIf="(!userIsPartner || !isLogged) && !existReview"
    routerLink="{{getAddReviewLink()}}"
    matTooltip="{{ (!existReview ? 'apps.mouse-over-enabled' : 'apps.mouse-over-disable') | translate}}">
    Write review
</app-primary-button>

p >

1 commentaires

Je pense que votre réponse m'a beaucoup aidé à résoudre le problème, c'est pourquoi j'accepterai votre réponse, et s'il vous plaît, si cela ne vous dérange pas de voter ma question, je veux juste avoir l'opportunité de poser plus de question à l'avenir et merci pour ton aide.

2
votes

Le bouton est désactivé mais le routerLink est toujours actif. Vous pouvez essayer d'ajouter une classe css supplémentaire afin de désactiver les événements de clic ... quelque chose comme ceci:

.disable-click {
  pointer-events: none;
  cursor: default;
}

Dans votre css:

<app-primary-button
[ngClass]="{'disable-click': disabled}"
...
/>

2 commentaires

cela rend le travail fait mais j'ai un petit problème, j'ai besoin que matTooltip soit montré @riorudo

Vous pouvez essayer de changer la classe css comme ceci: .disable-click: active {pointer-events: none; curseur: par défaut; } . J'ai trouvé cette solution ici