Angular6 和 JQuery - 布局不是 Karma 的功能

Question

我正在使用一些 JQuery 来解决我正在使用的库中的视觉错误。它运行良好，但现在我正在开发经过测试的版本，我遇到了一个错误。

所以，在我的组件中，我有：

declare var $: any;

@Component({ // })
export class MainComponent {
    constructor() {
        $('body').layout('fix')
    }
}

在 karma.conf.js 中，我有以下行：

files: [
  '../node_modules/jquery/dist/jquery.min.js',   
],

当我启动 ng test 时，出现了这个错误：

TypeError: $(...).layout is not a function

如有任何建议，我们将不胜感激。

Answer 1

准备好将其环绕文档。

constructor() {
     $(document).ready(function() {
        $('body').layout('fix')
     });
}

但我强烈建议使用 angular

时尽可能少使用 jquery

Answer 2

Link 您的 JQuery 文件在 angular.json 文件的 scripts 部分。

这是 angular.json - https://github.com/angular/angular/blob/master/aio/angular.json

的结构

此外，我建议使用 ngOnInit() 方法而不是 constructor() 方法编写代码。

Answer 3

步骤：

1) 在 index.html 中将标记放在下面一行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2) 在下面的组件 ts 文件中你必须像这样声明 var

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit(){
    $('body').layout('fix'); //
  }

}

现在你可以随心所欲地使用它了。如果它不适用于 karma 那么尝试这样定义它：

files: [
  { pattern: './node_modules/jquery/dist/jquery.min.js', watched: false },    
]

制作watched option false

Angular6 和 JQuery - 布局不是 Karma 的功能

Angular6 and JQuery - layout is not a function with Karma

jquery

karma-jasmine

angular-cli

angular

angular-test