我已经快速创建了一个简单的组件
@Component({
selector: 'saved-overlay',
templateUrl: './saved-overlay.html',
exportAs: 'saved-overlay',
animations: [
trigger('inOut', [
transition('void => *', [
animate("300ms ease-out", keyframes([
style({opacity: 0}),
style({opacity: 1})
]))
]),
transition('* => void', [
animate("300ms ease-out", keyframes([
style({opacity: 1}),
style({opacity: 0})
]))
])
])
]
})
export class SavedOverlayComponent {
}
我在我的模板中这样调用它:
<saved-overlay #myOverlay='saved-overlay'></saved-overlay>
无论如何,是否可以从我的组件外部调用 inOut 动画(即在我引用此组件的模板中)。 我理想的情况是在我的组件本身上使用这个动画:
<saved-overlay #myOverlay='saved-overlay' [@inOut]></saved-overlay>
但是,它确实触发了一个错误,指出我的 inOut
动画未定义。
最佳答案
您可以为此使用@HostBinding:
@Component({
selector: 'saved-overlay',
templateUrl: './saved-overlay.html',
exportAs: 'saved-overlay',
animations: [
trigger('inOut', [
transition('void => *', [
animate("300ms ease-out", keyframes([
style({opacity: 0}),
style({opacity: 1})
]))
]),
transition('* => void', [
animate("300ms ease-out", keyframes([
style({opacity: 1}),
style({opacity: 0})
]))
])
])
]
})
export class SavedOverlayComponent {
@HostBinding("@InOut")
foo:any;
}
然后不需要绑定(bind)到任何东西或在模板中指定它:
<saved-overlay #myOverlay='saved-overlay'></saved-overlay>
请注意,我使用随机属性是因为我们实际上并不关心它,因为您使用特殊状态(*
和 void
),所以您不需要不需要在这个属性中存储任何东西,并随意命名......
关于Angular2 使用组件外部的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43612500/