在角度模板中使用jquery ui小部件

时间:2018-08-06 12:54:08

标签: javascript jquery angular jquery-ui

我有一个角度项目,但在与jQuery ui复选框非常接近的任何CSS库中都没有找到漂亮的复选框,并且想在我的角度项目中使用它们。 使用jquery,您可以在页面加载后使用以下代码设置复选框的样式...

$(document).ready(function(){
    $(":checkbox").checkboxradio();
});

假设您使用..导入的jquery库在index.html文件中

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

尽管我已经用npm安装了jquery,但可能还有另一种方法可以做到这一点。然后,在我的组件中,我在导入之间声明了一个变量,并在初始化后调用了jquery函数。

import { Component, AfterViewInit } from '@angular/core';

declare var $:any;

@Component({
  selector: 'app-test',
  template: `<label for="checkbox1">checkbox 1</label>
            <input type="checkbox" name="checkbox1" id="checkbox1">`
})
export class CrimeTableComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    $(document).ready(function(){
      $( "#checkbox1" ).checkboxradio({
        icon: false
      });
    });
  }

我不断收到Uncaught TypeError: $(...).checkboxradio is not a function

这可能还是我做错了什么?

1 个答案:

答案 0 :(得分:0)

解决了有关SO上类似问题的阅读(我可能有点急于发布此问题),走了通过npm安装jquery和jquery-ui的路线。按照这个答案walakad's answer,我需要通过npm安装jquery-ui-dist,然后通过在我的angular-cli.json文件中进行引用来确保导入的所有内容。

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jquery-ui-dist/jquery-ui.min.js",
        ...etc..
],   

(这也是阻止我将其标记为重复项的部分,与其他答案不同),将以下内容添加到了angular-cli.json的样式部分。

"styles": [
        "../node_modules/jquery-ui-dist/jquery-ui.css",
        ...etc..
],

这对于获取我用来工作的jquery-ui小部件(checkboxradio)很重要。

然后与上述相同,在其中声明jquery变量并仅调用jquery,无需准备文档,这由有角度的AfterViewInit覆盖...

import { Component, AfterViewInit } from '@angular/core';

declare var $:any;

@Component({
  selector: 'app-test',
  template: `<label for="checkbox1">checkbox 1</label>
            <input type="checkbox" name="checkbox1" id="checkbox1">`
})
export class CrimeTableComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    $("#checkbox1").checkboxradio({
        icon: false
      });
  }
}

现在可以使用了:)