テンプレートのデコレータ "@"。どのように機能するのですか？

Question

この「@」デコレータを角型/イオン型で使用する方法については、誰も私に詳しい情報を教えてもらえますか？

私はコンポーネントを装飾するための基本的な使用を知っていた：

@Component ({ 
   Selector: 'page-home', 
   TemplateUrl: 'home.html' 
}) 

私は、ウェブ上で以下のコードを得たが、私はコピーして貼り付けると、完全にコードを理解していない嫌い。 "テンプレート"でこの使い方を見てください！ていないコンポーネントではなく、テンプレートではい：

<Ion-searchbar [@InOut]="varInOutState" (input)="getItems ($event)"> </ ion-searchbar> 

ちょうど私が@InOutは私のコンポーネント内に完全に表示されるスニペットを出してあげるコンテキストを理解すること。

@Component ({ 
      Selector: 'page-home', 
      TemplateUrl: 'home.html', 
      Animations: [ 
        Trigger ('InOut', [ 
          State ('in', style ({ 
            Transform: 'translate3d (0, 0, 0)' 
          })), 
          State ('out', style ({ 
            Transform: 'translate3d (150%, 0, 0)' 
          })), 
          Transition ('in => out', animate ('200ms ease-in')) 
          Transition ('out => in', animate ('200ms ease-out')) 
        (I.e. 
      ] 
}) 

誰かがドキュメントを手助けしてテンプレートのこのケースを要約できますか（私はコンポーネントでの使用しか知りませんでした）？

おかげ

Answer 1

アニメーションがyour.component.ts内のコンポーネントのデコレータで宣言された後、[@]の構文を使用して計画されたHTML要素に適用されます。

だからあなたの場合には、それはInOutあり、それはあなたのコンポーネントにTrigger ('InOut',...

<Ion-searchbar [@InOut]="varInOutState" (input)="getItems ($event)"> </ ion-searchbar> 

を定義している最初の部分はアニメーションの名前と一致し、与えられたパラメータの値が（「アウト」または「で」）であるから、我々のコンポーネント。

さらに詳しくは、次の記事をご覧ください。Ng2-Animation