如何根据条件在 angular 组件模板中的多个部分之间切换

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

由于您要检查布尔值，因此您可以这样做

<section *ngIf="guest">

其他两个条件也一样

Answer 2

您已将所有开关 off/on 依赖于这些部分（相关的 ngIf 指令）的按钮放置在这些部分中：

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

并且 goToLogin 应该切换 off/on section（其中放置了按钮 Login）：

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

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

我想所有切换 off/on 相关块的按钮都应该像这样（也使用 *ngIf="guest"）：

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

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

Answer 3

这并不能解决您的问题，因为它似乎已经解决了。相反，这为您要实现的目标提供了另一种替代解决方案。您还可以使用 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 4

试试这个

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

希望有用

如何根据条件在 angular 组件模板中的多个部分之间切换

How to switch between several sections in angular component template based on condition

html

angular-template

angular

component.html

component.ts