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

【问题标题】：Decorator "@" on template. How does it work?模板上的装饰器“@”。它是如何工作的？
【发布时间】：2017-08-28 08:31:46
【问题描述】：

谁能给我更多关于在角度/离子中使用这个“@”装饰器的信息？

我知道装饰组件的基本用法：

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

我在网络上获得了以下代码，但我讨厌复制和粘贴并且不完全理解代码。看看“模板”上的这个用法！是的，不在组件中，而是在模板中：

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

为了理解上下文，我将把 @InOut 完全出现在我的组件中的 sn-p。

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

有人可以帮我整理文档并在模板中总结这个案例吗（我只知道在组件中的使用）？

谢谢

【问题讨论】：

标签： angular ionic-framework decorator

【解决方案1】：

动画在 your.component.ts 中的组件装饰器中声明，然后使用 [@] 语法应用于计划的 HTML 元素。

所以在你的情况下它是 InOut ，它是在你的组件中定义的 Trigger ('InOut',...

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

第一部分与动画名称匹配，给定参数是我们组件中的值（“out”或“in”）。

更多详情请看这篇文章：Ng2-Animation

【讨论】：