2017-02-14 18 views
6

ドキュメントの私の解釈によれば、デフォルトで隠された要素を持ち、リンクがクリックされたときに表示されるようにするには、以下のように動作する必要がありますか? /app/app.component.html角度2 - ngShow相当ですか?

<a href="#" (click)="newTrustFormVisible = !newTrustFormVisible;">[Add New]</a> 

<div ng-show="newTrustFormVisible" class="panel panel-default"> 
    ... 
</div> 

  1. /app/app.component.tsで

    newTrustFormVisible: false; 
    
  2. しかし、これは動作しません。また、エラーも発生しません。私は何が欠けていますか?

+0

私も 'newTrustFormVisibleを試してみました:偽=ブール;'私は実際に正しい構文であると考えていますその行には、rには何の違いもありませんesult。 –

答えて

18

Angular 1指令を使用しています。 Angular 2の場合、DOM内にある必要はなく、HTML隠しプロパティ[hidden]にバインドする必要がないコンポーネントの場合は、コンポーネントが常にDOM内にあり、CSSで隠されるようにするには、*ngIfを使用します。

例:

または

<div [hidden]="!newTrustFormVisible" class="panel panel-default"> 

Angular 1 to Angular 2 reference

*ngIf

+0

これはうまくいきました。ありがとうございますが、ドキュメントの例のようにアニメーション化されていません(正しいですが、AngularJS 1.xのようです)。 –

+0

アニメーションは別々の魚です。https://angular.io/docs/ts/latest/guide/animations.html – shusson

+0

ng-showが自動的にアニメーション化されるので、最も近いAngular 2の同等物はそうしません。奇妙に思える?私はngClassに切り替えましたが、これはアニメーション化が容易であるように見えますが、まだアニメーションが動作していません。私は遊ぶつもりです。 –