将外部css和javascript文件导入Angular 4

Posted 2023-03-13

【中文标题】将外部css和javascript文件导入Angular 4

【英文标题】：Importing external css and javascript file to Angular 4

【发布时间】：2018-04-25 08:40:35

【问题描述】：

我有一个 javascript 文件和一个 css 文件，我想在我的 angular 4 应用程序中使用它们。

我尝试将它们导入到 angular-cli.json 文件中，如下所示：

  "styles": [
    "../../../bootstrap-combobox/js/bootstrap-combobox.min.css",
    "./styles.scss"
  ],
  "scripts": [
    "../../../bootstrap-combobox/js/bootstrap-combobox.min.js"
  ],

但它似乎不起作用。我确保文件的路径是正确的。

为了完成这项工作，我需要使用 jQuery 将 html 元素分配给函数，所以我这样做了：

import  Component, OnInit, ViewEncapsulation  from '@angular/core';
import * as jQuery from '../../../node_modules/jquery'

@Component(
  selector: 'app-billgenerator',
  templateUrl: './billgenerator.component.html'
)
export class BillgeneratorComponent implements OnInit 
  constructor()  
  ngOnInit() 

  ngAfterViewInit() 
    jQuery(document).ready(function () 
    jQuery(".chosen").combobox();
  );
  

这是我想要应用的html元素：

<select class="chosen">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

我做错了什么？ 我最近开始学习 Angular，所以对它了解不多。

【参考方案1】：

使用 npm 安装 jQuery

npm install --save jquery
npm install -D @types/jquery

添加：

"scripts": [
 "../node_modules/jquery/dist/jquery.min.js",
],

并像这样导入它

import * as $ from 'jquery';

然后使用它：

 ngAfterViewInit() 
  $(document).ready(function () 
  $(".chosen").combobox();
 );

如果 jQuery 是正确集成的，你可以导入你的 js 文件