Importieren von externen CSS und Javascript-Datei zu Angular 4

Question

Ich habe eine Javascript-Datei und eine CSS-Datei, die ich in meiner eckigen 4 App verwenden möchte.

ich versuchte, sie in der angular-cli.json Datei wie folgt importieren:

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

Aber es scheint nicht zu funktionieren. Ich habe sichergestellt, dass der Pfad der Dateien korrekt ist.

Auch diese Arbeit zu machen, brauche ich jQuery zu verwenden, um ein HTML-Element auf eine Funktion zuweisen, so dass es ich habe auf diese Weise:

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(); 
    }); 
    } 
} 

Hier ist das HTML-Element, dass ich es anwenden möchten an:

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

Was mache ich falsch? Ich habe vor kurzem begonnen, Angular zu lernen, also weiß ich nicht viel darüber.

Answer 1

installieren jQuery mit npm

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

add:

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

und importieren Sie es wie diese

import * as $ from 'jquery'; 

und verwenden Sie es, dass whay:

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

Wenn jQuery integriert ist, können Sie Ihre js-Dateien

importieren