1
votes

Comment basculer entre plusieurs sections dans un modèle de composant angulaire en fonction de la condition

J'ai quelques sections dans mon fichier de modèle de composant que j'aimerais basculer entre certaines conditions.

public login = false;
public register = false;
public guest = true;

private reset() {
   this.login = false;
   this.register = false;
   this.guest = false;
}

public goToLogin() {
   this.reset();
   this.login = true;
}

public goToRegister() {
   this.reset();
   this.register = true;
}

public goToGuest() {
   this.reset();
   this.guest = true;
}

Mon fichier component.ts ressemble à ceci ... Initialement, l'invité est défini sur true et le reste des sections est masqué.

<section *ngIf="guest==true">
   <h1>Guest</h1>
   <button (click)="goToLogin()">Login</button>
   <button (click)="goToRegistration()">Register</button>
</section>

<section *ngIf="login==true">
   <h1>Login</h1>
   <button (click)="goToRegistration()">Register</button>
   <button (click)="goToGuest()">Guest</button>
</section>

<section *ngIf="register==true">
   <h1>Register</h1>
   <button (click)="goToLogin()">Login</button>
   <button (click)="goToGuest()">Guest</button>
</section>

Le résultat souhaité est tel que lorsqu'un utilisateur clique sur un bouton, la section correspondante est placée dans vue et le reste caché. Le code que vous voyez ne fonctionne pas. Comment faire fonctionner cela et y a-t-il une meilleure façon de le faire? J'aimerais vraiment savoir.

angular html angular-template

0 commentaires

4 Réponses :

0
votes

Puisque vous comparez un booléen, vous pouvez simplement faire

<section *ngIf="guest">

la même chose pour deux autres conditions également

4 commentaires

Aucune section n'est toujours affichée.

ce qui signifie que toutes les valeurs sont fausses

Et c'est juste là mon problème. Pourquoi toutes les valeurs sont-elles fausses alors que j'appelle clairement des méthodes qui définissent l'une des trois propriétés sur true?

Je ne vois aucune valeur de l'utilisation de la fonction de réinitialisation car vous avez initialisé toutes les variables sur false au départ.

1
votes

Vous avez placé tous les boutons qui activent / désactivent les sections en fonction de ces sections (directive ngIf associée) à l'intérieur de ces sections:

<section *ngIf="guest">
 <h1>Guest</h1>
 <button (click)="goToRegistration()">Register</button>
</section>

<button (click)="goToLogin()">Login</button>

Et goToLogin devrait activer / désactiver la section (à l'intérieur duquel le bouton Login est placé):

// initially it's false
public login = false;

public goToLogin() {
  this.reset();
  this.login = true;
}

Je suppose que tous les boutons qui activent / désactivent les blocs associés devraient être parmi eux comme ça (utilisez également * ngIf = "guest" ):

<section *ngIf="guest==true">
 <h1>Guest</h1>
 <button (click)="goToLogin()">Login</button>
 <button (click)="goToRegistration()">Register</button>
</section>

0 commentaires

1
votes

Cela ne résout pas votre problème car il semble avoir déjà été résolu. Cela fournit plutôt une autre solution alternative à ce que vous essayez d'accomplir. Vous pouvez également utiliser la directive structurelle ngSwitch qui peut obtenir le même résultat mais de manière plus simple. Cela réduira la logique de votre fichier component.ts à une seule méthode.

component.html

export class AppComponent  {

  public state: string = 'login';

  public goTo(state) {
    this.state = state;
  }

}

component.ts

<ng-container [ngSwitch]="state">
  <section *ngSwitchCase="'guest'">
   <h1>Guest</h1>
   <button (click)="goTo('login')">Login</button>
   <button (click)="goTo('register')">Register</button>
  </section>

  <section *ngSwitchCase="'login'">
   <h1>Login</h1>
   <button (click)="goTo('register')">Register</button>
   <button (click)="goTo('guest')">Guest</button>
  </section>

  <section *ngSwitchCase="'register'">
   <h1>Register</h1>
   <button (click)="goTo('login')">Login</button>
   <button (click)="goTo('guest')">Guest</button>
  </section>
</ng-container>

https://angular.io/api/common/NgSwitch

https://stackblitz.com/edit/angular-skxolq

1 commentaires

Ceci est exactement ce que je cherchais. Merci!

0
votes

Essayez ceci

component.html

public login = false;
  public register = false;
  public guest = true;

  private reset() {
    this.login = false;
    this.register = false;
    this.guest = false;
  }

  public goToLogin() {
    this.reset();
    this.login = true;
  }

  public goToRegister() {
    this.reset();
    this.register = true;
  }

  public goToGuest() {
    this.reset();
    this.guest = true;
  }

<section>
        <h1 *ngIf="guest">Guest</h1>
        <h1 *ngIf="login">Login</h1>
        <h1 *ngIf="register">Register</h1>
        <button (click)="goToLogin()" *ngIf="guest || register">Login</button>
        <button (click)="goToRegister()" *ngIf="login || guest">Register</button>
        <button (click)="goToGuest()" *ngIf="register || login">Guest</button>
    </section>

J'espère que cela vous sera utile

0 commentaires