最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

lottie - Using Lottielab web player in angular 15 - Stack Overflow

programmeradmin2浏览0评论

I have a Webapp using Angular 15 (due to the codebase being really old and we dont have the upgrade to angular 19 fully figured out). I am using the lottielab/lottie-player/web package to include an interactive lottie file. It works so far, but i have the problem that it throws console errors even though it works. My angular component looks as follows:


import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from "@angular/core";
import Lottie from "@lottielab/lottie-player/web";
import { Observable, Subscription } from "rxjs";

@Component({
  selector: "interactive-lottie",
  templateUrl: "./interactive-lottieponent.html",
  styleUrls: ["./interactive-lottieponent.css"],
})
export class InteractiveLottieComponent implements OnInit, OnDestroy {
  private eventsSubscription: Subscription;

  @Input() events: Observable<string>;
  @Input("name") name: string;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    if (this.name) {
      const lottie = new Lottie();
      this.eventsSubscription = this.events.subscribe((triggerName: string) => {
        lottie.interactivity.trigger(triggerName)   
      });
      if(lottie){
        lottie.setAttribute(
          "src",
          `assets/microinteractions/interactive/${this.name}.json`
        );
        lottie.setAttribute("autoplay", "true");
        
        const target = this.el.nativeElement;
        this.renderer.appendChild(target, lottie);
        target.querySelector("lottie-player").shadowRoot.querySelector("style").remove()
      }
    }
  }


  ngOnDestroy() {
    this.eventsSubscription.unsubscribe();
  }
}

the component is implemented as follows:

<interactive-lottie name="bookSearchWhite" [events]="eventsSubject.asObservable()"></interactive-lottie>

But i am getting the error

interactive-lottieponent.ts:26: ERROR Error: Uncaught (in promise): 
TypeError: Cannot set properties of null (setting 'textContent')
TypeError: Cannot set properties of null (setting 'textContent')

I also tried putting the init code inside ngAfterViewInit but that also did not seem to work. Any ideas what i'm doing wrong here? As previously mentioned, the component works as expected and therefor i do not understand where the errors are coming from. This is also the only implementation of the Component so this is the only source that the error could originate from.

发布评论

评论列表(0)

  1. 暂无评论