时间戳

首页 > 解决方案 > Aurelia 不会加载自定义组件

aurelia - Aurelia 不会加载自定义组件

问题描述

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

我正在使用本地 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

解决方案

您的类名是BoardingPassList，因此按照惯例，html 中的标记应该boarding-pass-list是boardingpass-list.

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

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

更多信息可以在这里找到

推荐阅读