Angular 4.4.7中style方法出现AnimationStyleMetadata类型匹配错误

错误原因 #

你遇到的Type 'AnimationStyleMetadata' has no properties in common with type 'AnimationOptions'错误，本质是TypeScript类型检查发现transition函数的参数格式不符合Angular 4.4.7的动画API规范：

• transition的第二个参数要求是动画步骤数组（AnimationMetadata[]），你的代码直接把style()作为参数传入，导致TypeScript误将其匹配到不兼容的AnimationOptions类型，触发类型不匹配报错。
• 之前代码正常运行，大概率是因为当时TypeScript严格类型检查未开启，或者版本较低，隐式跳过了这个格式错误。

修复方案 #

根据你的需求，把style()放在正确的动画步骤结构里即可，两种常见场景：

场景1：过渡时先应用样式，再执行动画 #

如果是要在过渡开始时先设置目标样式，再执行后续动画，把style()作为动画序列的第一个步骤：

transition('你的状态切换表达式', [
  style({ overflow: "hidden", position: "relative", height: "*" }),
  animate('300ms ease-in-out') // 替换为你的实际动画时长和缓动函数
])

场景2：无动画，直接切换样式 #

如果只是要在状态切换时直接应用样式，不需要动画效果，用animate(0)包裹style()：

transition('你的状态切换表达式', animate(0, style({ overflow: "hidden", position: "relative", height: "*" })))

内容的提问来源于stack exchange，提问作者Joseph Campbell