Aurelia 不会加载自定义组件答案

【问题标题】：Aurelia will not load custom componentAurelia 不会加载自定义组件
【发布时间】：2019-09-16 14:12:23
【问题描述】：

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

我正在使用本地 aurelia-cli v1.0.2

我的元素名称是“boardingpass-list”。它没有任何绑定我正在使用所有“需要”标签，所有名称和文件夹结构都可以。我什至剥离了组件中的所有内容以留下一个空的构造函数，而 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”。我删除了除构造函数和附加/分离之外的所有方法：

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

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

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

【问题讨论】：

标签： aurelia

【解决方案1】：

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

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

将导出的类名改为BoardingpassList
在导出的类上使用 @customElement('boardingpass-list')。

更多信息请见here

【讨论】：

非常感谢。将我的类 html 标记更改为确实成功了。命名是我唯一没有想到的！ :)