在 Angular 单个组件中导入第三方 JavaScript 库

Question

我目前正在开发一个Angular4应用程序，我想导入一些javascript库，但只针对单个组件。目前，我可以通过定义它们在.angular-cli.json中的路径来轻松导入这些库，如下所示：

{
   "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/jqueryui/jquery-ui.js",
      "../src/assets/js/jquery/cometd/org-cometd.js",
      "../src/assets/js/jquery/cometd/jquery.cometd.js",
   ],
   ...
}

但是，将为所有应用程序导入上述脚本。有没有办法仅为特定组件导入它们？我尝试将它们导入组件中，如下所示，但没有成功。

import { Component, OnInit, ViewEncapsulation, Inject } from '@angular/core';
...
import "../../../../../node_modules/jquery/dist/jquery.min.js";
import "../../../../../node_modules/jqueryui/jquery-ui.js";
import "../../../../assets/js/jquery/cometd/org-cometd.js";
import "../../../../assets/js/jquery/cometd/jquery.cometd.js";
@Component({
   selector: '...',
   templateUrl: '...',
   styleUrls: '...',
   encapsulation: ViewEncapsulation.None
})
export class MyComponent implements OnInit {
   ...
}

[更新] - 我忘了提到我目前正在使用 ViewEncapsulation.None 来将某些 css 文件中的样式应用到组件中。不确定此详细信息是否与问题相关。

Answer 1

像jQuery和bootstrap这样的东西是全局的，将可供应用程序使用。但是，最好使它们可注射，从而可以从单个组件引用。

首次安装 jQuery

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

第二制作注塑模块

import { NgModule } from '@angular/core';
import { InjectionToken } from '@angular/core';
import * as jquery from 'jquery';
export const JQUERY = new InjectionToken<jquery>('jQuery');
export function _jquery(): jquery {
  return jquery;
}
@NgModule({
  providers: [{
    provide: JQUERY,
    useFactory: _jquery
  }]
})
export class JqueryTokenModule { }

第三，在你的模块中：

providers: [{provide: JQUERY, useValue: _jquery}]

最后，将其注入到组件中

constructor(@Inject(JQUERY) private $) {
  // use `this.$` which is jQuery
}

Answer 2

您可以使用

import 将它们导入组件中。例如，对于jQuery它将是

import * as $ from 'jquery';

这意味着"从'jQuery'库中导入所有作为'$'(并进一步将其用作'$'(，并且您实际上不需要包含另一个导入到.angular.cli.json。它适用于 Angular 5(我已经测试过了(，我认为它应该也适用于 2 和 4 版本。为了确保它正常工作，您可以在ngOnInit块中写入console.log($)(例如(。

Answer 3

你可以简单地通过获取 src js 并将其导入到你的组件中来做到这一点。

这是我做的传单申请的一个例子：

package.json ：

"leaflet.markercluster": "^1.1.0",
"leaflet-draw": "^0.4.12",

random1.component.ts ： 带有标记群集库示例

declare const L: any;
import 'leaflet.markercluster';
export function initMarkerCluster(map: L.Map, mapService: LeafletService) {
  // Set the ClusterMarkerLayer
  const cluster = L.markerClusterGroup();
  ...
}

random2.component.ts ： with leaflet.draw library示例

declare const L: any;
import 'leaflet-draw/dist/leaflet.draw-src';
export function drawPlugin(map: L.Map, mapService: LeafletService) {
  const drawnItems: L.FeatureGroup = L.featureGroup().addTo(map);
  const drawControl = initDrawControl(drawnItems);
  map.addControl(drawControl);
  ...
}

注意：在这些传单库中，有用于传单的命名空间L，所以我声明了一个全局变量，但你不需要它。