Question

我对angular 6还是陌生的。我刚刚开始学习angular6。在创建项目时，我陷入了错误。

我只是将外部脚本添加到组件中并出现错误

这是我的代码

import { Component, OnInit } from '@angular/core';
import * as $ from 'src/assets/js/jquery-3.2.1.min.js';
import 'src/assets/js/countdowntime.js';

@Component({
  selector: 'app-comingsoon',
  templateUrl: './comingsoon.component.html',
  styleUrls: ['./comingsoon.component.css']
})

export class ComingsoonComponent implements OnInit {

  constructor() { }

  ngOnInit() {
     console.log($) // here is am getting output
  } 

}

错误：

Uncaught ReferenceError: jQuery is not defined at Object..
/src/assets/js/countdowntime.js (countdowntime.js:92)

Answer 1

更新您的代码

将jQuery添加到您的index.html或angular.json文件中

import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
@Component({
  selector: 'app-comingsoon',
  templateUrl: './comingsoon.component.html',
  styleUrls: ['./comingsoon.component.css']
})
export class ComingsoonComponent implements OnInit {

constructor() {
   // load countdown 
     var c = document.createElement("script");
     c.type = "text/javascript";
     c.src = "src/assets/js/countdowntime.js";
     document.getElementsByTagName("head")[0].appendChild(c);
}

ngOnInit() {
  console.log(jQuery) // here is am getting output
} 

}

Answer 2

您应该能够将jquery作为程序包添加并在您的组件代码中引用它，以便Webpack可以使用它：

$ npm add jquery

然后在您的TypeScript代码中：

import * as $ from 'jquery';

...

export class FooComponent implements OnInit {
    ngOnInit() {
        console.log($);
    }
}

Answer 3

解决方案1： 使用Jquery类型

需要为jquery版本添加类型。您可以在这里找到jquery类型

https://www.npmjs.com/package/@types/jquery

因为打字稿是强类型打字对于我们在组件中使用的所有项目，都应具有类型

解决方案2：

创建一个变量$并将其类型分配给任何

无法解决当前jquery版本的类型的解决方法

declare var $: any;
@Component({
  selector: 'app-comingsoon',
  templateUrl: './comingsoon.component.html',
  styleUrls: ['./comingsoon.component.css']
})

在组件生命周期内检查美元的价值，您会发现jquery的属性和方法。您的错误将得到解决

ngOnInit() {
  console.log($) 
}

在组件中加载多个脚本

3 个答案: