stenciljs中如何调用第三方组件的方法

Question

我在我的 stencilJs 应用程序中使用 lib 中的 LottiePlayer

他们在文档中提到：

您也可以通过编程方式设置和加载动画。

</lottie-player>
const player = document.querySelector("lottie-player");
player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");

// or load via a Bodymovin JSON string/object
player.load(
 '{"v":"5.3.4","fr":30,"ip":0,"op":38,"w":315,"h":600,"nm":"new", ... }'
);

现在在我的模板组件中我正在做

import * as lottiePlayer from "@lottiefiles/lottie-player";


@Component({
    tag: "welcome-page",
    styleUrl: "welcome-page.scss",
    shadow: true,
})
export class WelcomePage {
    private lottie: lottiePlayer.LottiePlayer;

    animate(): void {
        console.log(this.lottie);
        this.lottie.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
    }

    render(): any {
        return (
            <Host>
               <lottie-player
                    ref={(el) => this.lottie = el}
                    autoplay
                    mode="normal"
                    style={{ width: "300px", height: "300px" }}
                >
                </lottie-player>
                <idv-button
                            buttonType="primary"
                            onClick={this.animate.bind(this)}>
                            Animate
                </idv-button>
             </Host>
          );
      }

当我运行获得对 html 元素的引用时，但它不是 LottiePlayer 的类型，我可以在其上调用方法。

我也这样做了，但是播放器是空的

    animate(): void {
        const player: lottiePlayer.LottiePlayer = document.querySelector("lottie-player");
        player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
    }

我该如何解决这个问题？

Answer 1

我是这样解决的，以防其他人遇到同样的问题


    @Element() el;

    ...
  
    animate(): void {
        let element: any = this.el.shadowRoot.querySelector("lottie-player");

        if (element) {
            element.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
        }
    }

stenciljs中如何调用第三方组件的方法

How to call a method on athird-party component in stenciljs

web-component

stenciljs