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元素。

因此，在您的情况下，VisualBasicCompilationOptions(OutputKind.DynamicallyLinkedLibrary, optimizationLevel: OptimizationLevel.Debug);是在您的组件InOut中定义的

Trigger ('InOut',...

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

有关详情，请仔细阅读以下文章：Ng2-Animation

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

1 个答案: