在 Angular 中设置 Tiny-Slider

大佬教程收集整理的这篇文章主要介绍了在 Angular 中设置 Tiny-Slider，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在 Angular 中设置 Tiny-Slider？

开发过程中遇到在 Angular 中设置 Tiny-Slider的问题如何解决？下面主要结合日常开发的经验，给出你关于在 Angular 中设置 Tiny-Slider的解决方法建议，希望对你解决在 Angular 中设置 Tiny-Slider有所启发或帮助；

嗨，我正在尝试在我的 Angular 9 项目中使用 Tiny-slIDer。我正在遵循 this 指南。

我的组件如下所示：

import { tns } from "../../../../../node_modules/Tiny-slIDer/src/Tiny-slIDer"
... 
ngOnInit(): voID {
  tns({
    container: '.my-slIDer',items: 3,slIDeBy: 'page',autoplay: true
  });
}

HTML：

<div class="my-slIDer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

我收到这些错误：

1. 找不到 .my-slIDer Tiny-slIDer.Js:159:33
2. 错误类型错误：options.container.children 未定义 tns Tiny-slIDer.Js:166

那么显然它找不到dom元素？知道如何让它在 Angular 下工作。

解决方法

@H_944_28@

在 ngOnInit() Lifecycle Hook 中，实际的 html DOM 元素尚不可用。您需要改用 ngAfterViewInit()。只需在您的组件中实现 AfterViewInit 接口。像这样：

export class ExampleComponent implements AfterViewInit{
  ngAfterViewInit(){
    tns(...)
  }
}