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').chosen();适用于Chrome开发工具。

如何解决这个问题？

Answer 1

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

感谢twmobius

所以这里是：角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

1 个答案: