角度4のクリックで表示/非表示

Question

角度を使用して基本的な表示/非表示機能を作成しましたが、より洗練されたソリューションが必要なように感じられます。ここで

は私の現在のコードで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> 

ロジック：あなたはこのようなためanimations DSLを使用することにより、オーバーエンジニアリングされている

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

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

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

Answer 1

シンプルなアニメーション。不透明度を変更する必要がある場合は、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に単純なアニメーションを作成できます。