Aurelia 不会加载自定义组件

Question

我创建了几个加载到另一个组件中的自定义组件。这些组件之一将不会加载。不调用构造函数，所有其余组件生命周期事件也不调用。

我正在使用 Local aurelia-cli v1.0.2

我的元素名称是 'boardingpass-list'。它没有任何绑定我正在使用所有 'require' 标签，所有名称和文件夹结构都可以。我什至从组件中删除了所有内容以留下一个空的构造函数，而 html 只是一个 'hellow world!' 字符串。相同的结果。

主要自定义组件：

<template>
    //require other elements
    <require from="Views/Passenger/boardingpass-list"></require>

    //some more divs here
    <div>
       <boardingpass-list></boardingpass-list>
    </div>
</template>

这是我的组件的 .ts 文件：'boardingpass-list.ts'。我删除了除构造函数和 attached/detached:

之外的所有方法

import { autoinject } from "aurelia-framework";
import { BoardingpassPopupInfo } from "Objects/BoardingpassPopupInfo";
import { Subscription, EventAggregator } from "aurelia-event-aggregator";
import { BoardingpassDatasource } from "Data/BoardingpassDatasource";
import { PopulateBoardingPassListMessage } from "Core/messages";

@autoinject
export class BoardingPassList {
    public popoverInitialized : boolean;
    public boardingpassPopupInfoList: Array<BoardingpassPopupInfo>;
    public populateBoardingPassListSubscription : Subscription;

    constructor(private readonly boardingpassDatasource: BoardingpassDatasource, private readonly ea : EventAggregator) {
        this.popoverInitialized = false;
        this.boardingpassPopupInfoList = new Array<BoardingpassPopupInfo>();
        this.populateBoardingPassListSubscription = null;
        console.log('constructor');
    }

    public attached() : void {
        this.populateBoardingPassListSubscription = this.ea.subscribe(PopulateBoardingPassListMessage, () => console.log('hello!'));
    }

    public detached() : void {
        this.populateBoardingPassListSubscription.dispose();
    }
}

这是我的组件的 html：'boardingpass-list.hml'。我把它剥离到基础，看看它是否有效（它没有）：

<template>
    Hello world!
</template>

当我执行 au run --watch 时，除此特定组件外的所有组件均已正确呈现。对于 boardingpass-list 组件，我只得到这个空的 HTML 模块：

<div>
<boardingpass-list></boardingpass-list>
</div>

模块的资源根据 aurelia 的控制台输出正常加载，就像其他元素一样：

DEBUG [templating] importing resources for Views/Passenger/boardingpass-list.html

没有其他错误、异常或警告。

希望有人能指出我正确的方向，因为我不知道发生了什么，在此先感谢！

Answer 1

你的 class 名字是 BoardingPassList，所以按照惯例 html 中的标签应该是 boarding-pass-list 而不是 boardingpass-list。

如果您想使用 boardingpass-list 作为 html 标签，请选择这两个选项之一。

将导出的 class 名称更改为 BoardingpassList
对导出的 class 使用 @customElement('boardingpass-list')。

可以找到更多信息 here

Aurelia 不会加载自定义组件

Aurelia will not load custom component

aurelia