你能将你的动画移动到Angular2中的外部文件吗？

Question

该@Component注释为我们提供了一个animations属性.这可以用来定义列表triggers每个很多state和transition性能.

将多个动画添加到组件时,此列表可能会变得很长.此外,一些动画也非常适合在其他组件中使用.必须将它们直接放在每个组件中似乎很乏味且重复 - 而且它违反了DRY原则.

您也可以在组件上定义模板和样式属性,但在这里您可以选择提供templateUrl和styleUrls替换.我似乎无法找到一个animationUrls属性 - 我错过了什么 - 有没有办法做到这一点？

Answer 1

你当然可以.您可以在不同的文件中声明动画,然后将其导入到您需要的位置

animations.ts

export const animation = trigger(...)

component.ts

import { animation } from './animations'

@Component({
  animations: [ animation ]
})

或者,如果要使其可配置,则可以导出函数.例如,看看Fuel-UI Collapse.这是一个可重用(和可配置)的动画

collapse.ts

export function Collapse(duration: number = 300) {
    return trigger('collapse', [
           ...
        ])
}

然后在您的组件中,只需使用

import { Collapse } from './collapse'

@Component({
  animations: [ Collapse(300) ],
  template: `
    <div @collapse="collapsed ? 'true' : 'false'">
    </div>
  `
})
class MyComponent {}