装饰模板上的“@”。它是如何工作的？

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