typescript - Importer tredjeparts JavaScript-biblioteker i Angular enkeltkomponenter

Jeg utvikler for øyeblikket en Angular4-applikasjon, og jeg vil importere noen JavaScript-biblioteker, men bare for en enkelt komponent. For øyeblikket kan jeg enkelt importere disse bibliotekene ved å definere deres stier inne i .angular-cli.json på denne måten:

{
   "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",
   ],
   ...
}

Imidlertid vil de nevnte skriptene bli importert for hele applikasjonen. Finnes det en måte å importere dem bare for en spesifikk komponent? Jeg har forsøkt å importere dem inne i komponenten som vist nedenfor, men uten suksess.

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 {
   ...
}

[OPPDATERING] - Jeg glemte å nevne at jeg for øyeblikket bruker ViewEncapsulation.None for å kunne anvende stilene fra noen css-filer i komponenten. Ikke sikker på om denne detaljen kan være relatert til problemet.

Svar #1

Ting som jQuery og Bootstrap er globale og vil være tilgjengelige for applikasjonen. Men det er god praksis å gjøre dem injiserbare og dermed refererbare fra enkeltkomponenter.

Installer først jQuery

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

Deretter lager du en injeksjonsmodul

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

For det tredje, i modulen din:

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

Til slutt, injiser det i komponenten din

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

Svar #2

Du kan importere dem inne i komponenten ved å bruke import. For eksempel for jQuery vil det være

import * as $ from 'jquery';

som betyr "importer alt som '$' (og bruk det som '$' videre) fra 'jquery'-biblioteket", og du trenger egentlig ikke å inkludere en annen import til .angular.cli.json. Det fungerer fint for Angular 5 (jeg har testet det akkurat nå), jeg tror det burde fungere for versjon 2 og 4 også. For å forsikre deg om at det fungerer, kan du skrive console.log($) i ngOnInit-blokken (for eksempel).

Relaterte artikler