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

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

<section *ngIf="guest">

其他两个条件也一样

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

我希望这会有用

如何根据条件在角度分量模板的多个部分之间切换

4 个答案:

component.html

component.ts