我有一个角度项目,但在与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
这可能还是我做错了什么?
答案 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
});
}
}
现在可以使用了:)