angular-cli 已选择 jquery

Question

angular-cli.json的一部分

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/bootstrap-daterangepicker/daterangepicker.css",
    "../node_modules/bootstrap-chosen/bootstrap-chosen.css"
],
"scripts": [
    "../node_modules/hammerjs/hammer.min.js",
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap-chosen/dist/chosen.jquery-1.4.2/chosen.jquery.js"
  ],

blaBla.component.html

<div class="col-lg-3">
    <select appChosen multiple data-placeholder="Choose a Country" class="chosen chzn-done" tabindex="2">
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
    </select>
</div>

blaBla.directive.ts

import { Directive, ElementRef } from '@angular/core';
import * as $ from 'jquery';

@Directive({
    selector: '[appChosen]'
})
export class ChosenDirective {

    constructor(private el: ElementRef) {}
    ngAfterViewInit() {
        $(this.el.nativeElement).chosen({ allow_single_deselect: true });
    }
}

选择无效控制台错误：

__WEBPACK_IMPORTED_MODULE_1_jquery__(...).chosen is not a function

但是 $('.chosen').chosen(); 在 chrome 开发工具中工作。

如何解决这个问题？

Answer 1

我在这里找到解决方案https://github.com/angular/angular-cli/issues/2760

感谢 twmobius

所以这里是： angular-cli.json

"scripts": [
    "../vendor.ts"
  ],

vendor.ts

import * as $ from 'jquery';
window['$'] = window['jQuery'] = $;
require('./node_modules/chosen-js/chosen.jquery.js');

angular-cli 已选择 jquery

angular-cli chosen jquery

jquery

jquery-chosen

angular-cli

angular