裝飾模板上的「@」。它是如何工作的？

任何人都可以給我更多關於在角度/離子中使用這個「@」裝飾器的信息嗎？裝飾模板上的「@」。它是如何工作的？

我知道的基本使用裝飾組件：

@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. 
      ] 
})

有人可以幫助我的文檔，並在模板中總結這種情況（我只知道在組件中的使用）？

由於

來源

2017-04-03 Rodrigo Silveira

該動畫在your.component.ts組件裝飾聲明，然後使用[@]語法施加到所計劃的HTML元素。

所以你的情況它是InOut，即在組件定義Trigger ('InOut',...

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

第一部分中的動畫的名稱相匹配，並且所述給定參數是從所述值（「出」或「在」）我們的組件。

欲瞭解更多詳情，請通讀本文：Ng2-Animation

來源

2017-04-03 13:09:29

裝飾模板上的「@」。它是如何工作的？

回答

相關問題