Как переключаться между несколькими секциями в шаблоне углового компонента в зависимости от условия

Question

В моем файле шаблона компонента есть несколько разделов, между которыми я хочу переключаться в зависимости от определенных условий.

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

Мой файл component.ts выглядит примерно так ... Изначально для guest задано значение true, а остальные разделы скрыты.

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

Мой желаемый результат таков, что когда пользователь нажимает кнопку, появляется соответствующий раздел, а остальные скрываются. Код, который вы видите, не работает. Как мне заставить это работать и есть ли лучший способ сделать это? Я бы очень хотел знать.

Answer 1

Вы поместили все кнопки, которые выключают / включают зависимые от них секции (связанная директива ngIf) внутри этих секций:

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

И goToLogin должен выключить / включить section (внутрикоторой расположена кнопка Login):

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

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

Я думаю, что все кнопки, которые выключают / включают соответствующие блоки, должны быть вне их, как это (также используйте *ngIf="guest"):

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

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

Answer 2

Это не решит вашу проблему, так как кажется, что она уже решена. Это вместо этого предоставляет другое альтернативное решение для того, чего вы пытаетесь достичь. Вы также можете использовать структурную директиву ngSwitch, которая может достичь того же результата, но более простым способом. Это сократит логику вашего component.ts файла до одного метода.

component.html

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

component.ts

export class AppComponent  {

  public state: string = 'login';

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

}

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

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

Answer 3

Попробуйте это

component.html

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

component.ts

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

Надеюсь, это будет полезно

Answer 4

Поскольку вы проверяете логическое значение, вы можете просто сделать

<section *ngIf="guest">

то же самое для других двух условий