angular-cli 选择 jquery答案

【问题标题】：angular-cli chosen jqueryangular-cli 选择 jquery
【发布时间】：2016-12-09 16:27:24
【问题描述】：

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').chosen(); 在 chrome 开发工具中工作。

如何解决这个问题？

【问题讨论】：

标签： jquery angular jquery-chosen angular-cli

【解决方案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');

【讨论】：

要求未定义/..？