TypeError：Window.getCompulatedStyle：参数 1 不是对象

Question

在 iframe 中初始化 eager-slider 时，会显示此错误。在 Chrome 中这是有效的，但在 Firefox（版本 119）中显示错误。 像这样初始化敏锐的滑块：

this.slider = new KeenSlider(this.sliderRef.nativeElement, {});

我没有得到任何解决方案。

Answer 1

1) 将本机定义器添加到您的容器中：

<div #sharedAxisXRoot id="sharedAxisXRoot"></div>

2) 使用Angular的@ViewChild装饰器来引用容器元素：

@ViewChild("sharedAxisXRoot", { static: true }) sharedAxisXRoot!: ElementRef;

3) 在 ngOnInit 生命周期挂钩中，确保将本机元素从 ViewChild 传递到工具方法。

this.root = am5.Root.new(this.sharedAxisXRoot.nativeElement);

或

this.slider = new KeenSlider(this.sharedAxisXRoot.nativeElement, {});

通过这样做，Angular 可确保在执行任何操作之前正确初始化容器元素，从而消除与执行顺序相关的问题。这种方法可以防止在未定义或未初始化的元素上调用 getComputedStyle 等错误，从而确保顺利初始化。