Question

这不是重复：aurelia-trying-to-load-html-from-select2

我正在尝试将 select2 下拉列表添加到Aurelia Contact Manager，但我无法让它工作。

我的aurelia.json看起来：

...
{
  "name": "select2",
  "path": "../node_modules/select2/dist",
  "main": "js/select2",
  "deps": ["jquery"],
  "resources": [
    "css/select2.css"
  ]
}
...

自定义属性：

import {autoinject, customAttribute} from 'aurelia-framework';

import * as $ from 'jquery';
import 'select2';
import 'select2/css/select2.css!';

@customAttribute('select2')
@autoinject
export class SelectCustomAttribute {
    element: Element;

    constructor(element: Element) {
        this.element = element;
    }

    attached(): void {
        $(this.element)
            .select2({
                placeholder: 'Select!'
            })
            .on('change', e => {
                if(e.originalEvent) { return; }
            });
    }

    detached(): void {
        $(this.element).select2('destroy').off('change');
    }
}

构建应用程序失败：

[错误：ENOENT：没有这样的文件或目录，打开'C：\ Users \ MyApp \ node_modules \ select2 \ dist \ css \ select2.css.js']

删除import 'select2/css/select2.css!';会使其编译但是我必须手动加载 css ，无论我想要使用哪个属性，这都会使第一个位置的属性失效：

<require from="select2/css/select2.css"></require>
<section class="row container">
    <select select2>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
    </select>
</section>

Answer 1

根据您报告的错误，您需要执行一些操作。 angular-protractor的index.d.ts文件导致与jQuery的.d.ts文件发生命名冲突。

在typings/globals/angular-protractor/index.d.ts注释中，如1839（declare var $: cssSelectorHelper）。

将以下内容添加到aurelia.json文件中。

{
  "name": "select2",
  "path": "../node_modules/select2/dist",
  "main": "js/select2.min",
  "resources": [ 
    "css/select2.min.css"
  ]
}

aurelia-cli上有issue filed围绕导入css文件。关于如何包含.css文件，有一些解决方案。我采用的方法是将<require from="select2/css/select2.min.css"></require>添加到我的app.ts文件中。

如何将select2用作Aurelia属性？

1 个答案: