时间戳

首页 > 解决方案 > 我们可以在 Angular 7 中使用 jQuery LightSlider 吗？

javascript - 我们可以在 Angular 7 中使用 jQuery LightSlider 吗？

问题描述

我以前用 angular js 做过 LightSlider，但我不确定我是否可以在 angular 7 中使用它。我已经做了好几次研究，但似乎没有任何例子或任何 codepen 做过。我试过这样做，但它不起作用。所以特地过来问问大家。我可以使用 Angular 7 的 Light 滑块吗？这是LightSlider

标签： javascriptjqueryhtmlangular

解决方案

你应该能够。首先，确保你 npm-install jQuery 和 LightSlider 并将它们添加到 angular.json 文件（architect/build/options）的最小化样式和脚本集合中：

{
  ...
  "projects": {
    "testLightSlider": {
      ...
      "architect": {
        "build": {
          "options": {
            ...,
            "styles": [
              "src/styles.scss",
              "node_modules/lightslider/dist/css/lightslider.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/lightslider/dist/js/lightslider.min.js"
            ]
          }
          ...

然后只需declare var $在要使用 LightSlider 的组件中的导入下方进行操作，并使用 jQuery 对其进行初始化。请记住在 OnInit 或 AfterViewInit 中使用 jQuery，您将等待组件模板准备好（jQuery 需要准备好 DOM）

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({...})
export class AppComponent implements OnInit {

  public ngOnInit(): void {
    $('#target').lightSlider({
      // options here...
    });
  }
}

希望这可以帮助！

推荐阅读