ボタンで角度を隠す

Question

私は角張っているので、クリックしても消えるボタンを作ろうとしています。私は[隠し]、（クリック）= "showHide =！showHide"、およびその他の方法を使用しようとしました。これまでのところ何も働いていません。

私のhtml（現在）：

<div class="rows"> 
<div class="a-bunch-of-styles-for-my-button"> 
    <a type="button" class="more-styles" (click)="inboundClick = !inboundClick" [routerLink]="['/inbound']" href=""> 
    </a> 
</div> 
</div> 

と私のコンポーネント：本質的には

export class AppComponent { 
inboundClick = false; 
} 

私はページ上の2つのボタンがあり、1つのボタンがクリックされたときに、私は両方のボタンを非表示にすると、新しいボタンのセットを表示します。

私は非常にAngularに新しく、私は非常に混乱しています。ここで

Answer 1

あなたのHTML

<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false"> 
... 
</div> 

あなたの活字体

export class AppComponent { 
    private isButtonVisible = true; 
} 

これは、仕事をする必要があります。 *ngIfは、条件がfalseと評価された場合、要素を自動的に非表示にするため、変数をfalseに設定するだけで十分です。

私がここに見ている問題は、どの時点でも可視性を制御していないことです。特定のクラスを追加するために[ngClass]を使用するか、条件が満たされた場合は*ngIfが役に立ちます。

[ngClass]の詳細については、ここでその使用法について読むことができます：https://angular.io/api/common/NgClass

あなたはおよそ*ngIfここで読むことができます：

https://angular.io/api/common/NgIfは、特に「共通の使用」の部分はあなたのために興味深いものになるはずです。

編集： はそれ以下のコメントを読んで、あなたが実際に何をすべきか[hidden]と(click)気付かなかったようです。 [hidden]は、通常、特定の条件に依存する要素の可視性を制御します。 (click)しかし、Click-Eventを素早く要素にバインドする方法は簡単です。

これらのツールを使用すると、ユーザーが要素をクリックすると変数を変更して要素を非表示にできます（変数の新しい値は、(click)またはインラインで呼び出される関数によって割り当てられます）。サンプルコード）。

編集2：あなたはAngular2/4を意味しています;）これは仕事をするはずです。

Answer 2

は、あなたがそれを達成する方法である：あなたのcomponent.htmlで

：

<a type="button" class="more-styles" 
    [hidden]="!inboundClick" 
    (click)="inboundClick = !inboundClick" 
    [routerLink]="['/inbound']" href=""> 
</a> 

<a type="button" class="more-styles" 
    [hidden]="!outboundClick " 
    (click)="outboundClick = !outboundClick " 
    [routerLink]="['/outbound']" href=""> 
</a> 

...そしてあなたAppComponentで：

export class AppComponent { 
    inboundClick = true; 
    outboundClick = true; 
} 

---

PLUNKER DEMO