指令中不支持 Angular 2 RC 4 新动画答案

【问题标题】：Angular 2 RC 4 New Animations not supported in Directive指令中不支持 Angular 2 RC 4 新动画
【发布时间】：2016-07-10 20:44:35
【问题描述】：

似乎在当前版本中，我们只能向组件添加动画，而不能将它们定义为指令。我的意思是：

下面的作品

@Component({
    selector: "animate-demo",
    animations: [
        trigger('openClose', [
            state('closed, void',
                style({ height: "0px" })),
            state('open',
                style({ height: "*" })),
            transition("* => *", animate(200))
        ])

而以下不起作用：

@Directive({
    selector: "animate-demo",
    animations: [
        trigger('openClose', [
            state('closed, void',
                style({ height: "0px" })),
            state('open',
                style({ height: "*" })),
            transition("* => *", animate(200))
        ])
    ]
})

并在visual studio中给出编译错误：

"Argument of type '{ selector: string; animations: AnimationEntryMetadata[]; template: string; }' is not assignable to parameter of type '{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin...'.

通常我们可能希望在一个地方将常用的动画（如 slideDown、sliddeUp、fadeIn、fadeOut）定义为指令，然后在我们想要使用它们的组件中，我们只想导入指令并使用动画而不是在每个组件中重新定义动画。

【问题讨论】：

标签： animation angular angular2-directives angular2-services

【解决方案1】：

动画适用于视图，指令没有视图。

你需要重用动画是有道理的，但它会在组件中通过在组件动画元数据中设置全局定义的动画来完成。

它可能也将应用于 HTML 语法，类似于指令但不完全是 <div @my-animation="config here...">，但这将与触发器状态重叠...... API 尚未设置。

看到这个问题：https://github.com/angular/angular/issues/9668

【讨论】：