问题描述: 在导入期间,使用Angular 5和jQuery指令时,出现UI未定义的错误。
解决方法: 这个问题通常是由于在导入过程中发生了顺序错误导致的。下面是一种可能的解决方法:
import { Component, OnInit } from '@angular/core';
import 'jquery'; // 导入jQuery
import 'jquery-ui/ui/widgets/draggable'; // 导入jQuery UI的draggable插件
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit() {
// 在这里使用jQuery指令
$('.draggable').draggable();
}
}
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery-ui/ui/widgets/draggable.js"
]
declare var $: any;
声明全局变量$,以确保在任何地方都可以使用jQuery。import { Component } from '@angular/core';
declare var $: any; // 声明全局变量$
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() {
// 在这里使用jQuery指令
$('.draggable').draggable();
}
}
通过按照上述步骤,应该能够解决“Angular5 jQuery Directive - 在导入期间,UI未定义。”的问题。