HTML 组件和 Aurelia 中的普通组件之间的区别？

Question

我开始使用标准的 TypeScript 框架进行我的 Aurelia 开发。

我想向 "nav-bar" 组件添加一些代码，因此我决定将其从简单的 HTML-only 组件转换为常规组件。为此，我修改了 app.html 中的 require 标签 from:

<require from="nav-bar.html"></require>

到

<require from="nav-bar"></require>

接下来，我创建了一个 nav-bar.ts 文件，其中包含以下代码：

import {autoinject} from 'aurelia-framework';
import {customElement, bindable} from 'aurelia-framework';
// import {HttpClient} from 'aurelia-fetch-client';

@autoinject
@customElement('nav-bar')
export class NavBarClass {
    public attached() {
        console.log("TEST");
    }
  }
}

我保留了导航-bar.html 原样。现在程序运行并且控制台包含来自实例化 NavBarClass 的 TEST 值，BUT 以前在导航栏 HTML-only 时显示的菜单现在丢失了。

如何取回菜单？我究竟做错了什么？常规组件与仅 HTML 组件有何不同？

感谢您的帮助， -格雷格

Answer 1

在标准自定义元素中，可绑定属性在视图模型中定义：

导航-bar.js:

export class NavBar {
  @bindable router;
  ...
  ...
}

在仅 html 的自定义元素中，没有视图模型，因此可绑定属性列在 <template> 元素的 bindable 属性中：

导航-bar.html:

<template bindable="router">
  ...
  ...
</template>

无论哪种方式，导航栏元素的用法都是相同的：

<nav-bar router.bind="router"></nav-bar>

HTML 组件和 Aurelia 中的普通组件之间的区别？

Difference between HTML component and a normal component in Aurelia?

javascript

aurelia