组件名称中的 Aurelia 破折号不起作用答案

【问题标题】：Aurelia dash in component name not working组件名称中的 Aurelia 破折号不起作用
【发布时间】：2017-07-07 17:30:43
【问题描述】：

我有一个基本的 Aurelia 组件，看起来当我在它的名称中使用破折号时，它不起作用。

当我拥有它时它可以工作：

import {inject, customElement, bindable} from 'aurelia-framework';

@customElement('helloworld')
@inject(Element)
export class HelloWorldCustomElement {
    constructor(element) {
        console.log ('here')
    }
}

<helloworld></helloworld>

但不是什么时候是这样的：

import {inject, customElement, bindable} from 'aurelia-framework';

@customElement('hello-world')
@inject(Element)
export class HelloWorldCustomElement {
    constructor(element) {
        console.log ('here')
    }
}

<hello-world></hello-world>

根据 Aurelia 文档，它应该可以双向工作：https://github.com/aurelia/templating/blob/master/doc/article/en-US/templating-custom-elements.md

【问题讨论】：

您确定您的应用程序中没有其他hello-world 组件或属性吗？
看来是这样。我正在导入一个导致冲突的同名 HTML 文件：<require from="hello-world/hello-world.html"></require>

标签： javascript aurelia

【解决方案1】：

我设法找到了原因。在app.html 我有以下行，似乎存在命名冲突。删除它会立即解决问题。

<require from="hello-world/hello-world.html"></require>

【讨论】：

另外值得注意的是，如果您通过MyElementCustomElement 使用默认命名约定，则不需要使用customElement 装饰器，反之亦然。装饰器为您提供更多控制权，并允许您对元素使用不同命名的类。