将 Lottie Player 安装到 Angular

Question

我目前正在尝试将Lottie实现到我的 Angular Web 应用程序中。

不知怎的，我还无法做到这一点。我尝试按照github的说明进行操作，但这会导致多个错误，如 fe：

lottie-player 不是已知的 ng 模块。

此外，我尝试为 Angular 安装ng-lottie - 因为原始版本无法工作 - 但这个版本没有提供任何选项来跳转到某一帧或仅循环到特定帧。

有谁知道让乐蒂玩家工作的替代方案或方法？

Answer 1

您可以添加lottie-player作为自定义元素架构

npm install --save @lottiefiles/lottie-player

角度.json

"scripts": [
          "./node_modules/@lottiefiles/lottie-player/dist/lottie-player.js"
]

自定义模块.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CustomModule { }

自定义组件.html

<lottie-player src="https://assets4.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json"  background="transparent"  speed="1" loop  autoplay >
</lottie-player>

希望这可以帮助！如果您设法用不同的方法实现它，您可以通过分享来提供帮助