Question

我已经使用Angular创建了一个基本的显示/隐藏功能，但我觉得必须有一个更优雅的解决方案。

这是一个包含我当前代码的plnkr： http://plnkr.co/edit/Q8NfhTL25Y8gOoGMXiP2?p=preview

HTML：

  <div class="container">
    <label>
      <input class="pvq-create-checkbox" type="checkbox" name="" value="" (click)='question1()'>
      <div class="pvq-create-label">
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh?</p>
      </div>
    </label>
    <label [@hideShow]='state1'>Answer
      <input type="textbox" name="">
    </label>
  </div>

逻辑：

  state1: string = 'inactive';
  state2: string = 'inactive';

  question1() {
    this.state1 = (this.state1 === 'inactive' ? 'active' : 'inactive');
  }

  question2() {
    this.state2 = (this.state2 === 'inactive' ? 'active' : 'inactive');
  }

Answer 1

使用animations DSL进行这样一个简单的动画，你过度工程了。如果您只需要修改不透明度，也可以使用css并切换类。

示例component.ts：

class MyComponent {

    showButtons: any = {
        q1: false,
        q2: false
    }

    toggleButton(button: string): void {
        this.showButtons[button] = !this.showButtons[button]
    }
}

component.html

<input type="text" [class.show]="showButtons.q1" placeholder="Answer 1">
<button (click)="toggleButton('q1')">Show question 1</button>

<input type="text" [class.show]="showButtons.q2" placeholder="Answer 2">
<button (click)="toggleButton('q2')">Show question 2</button>

现在，您可以在每个输入中切换show类。您可以在css中创建简单动画，而不是使用动画。

使用Angular 4单击显示/隐藏

1 个答案: