在Component中加载多个脚本

Posted 2021-04-04

我是角度6的新手。我刚开始学习角度6.在创建项目时我遇到了错误。

我只是将外部脚本添加到我的组件中并获得错误

这是我的代码

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)

答案

更新您的代码

将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
} 

}

另一答案

您应该能够将jquery作为包添加并在组件代码中引用它，因此它可以被Webpack拾取：

$ npm add jquery

然后在你的TypeScript代码中：

import * as $ from 'jquery';

...

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

另一答案

解决方案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($) 
}