javascript - Aurelia 中 HTML 组件和普通组件的区别？

Question

我从 Aurelia 开发的标准 TypeScript 框架开始。

我想向“导航栏”组件添加一些代码，因此我决定将其从简单的纯 HTML 组件转换为常规组件。为此，我修改了 app.html 中的 require 标签:

<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");
    }
  }
}

我保留了 nav-bar.html 原样。现在程序运行并且控制台包含来自实例化 NavBarClass 的 TEST 值，但是当导航栏为纯 HTML 时曾经显示的菜单现在丢失了。

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

感谢您的帮助， -格雷格

Answer 1

在标准自定义元素中，可绑定(bind)属性在 View 模型中定义:

nav-bar.js:

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

在纯 html 自定义元素中，没有 View 模型，因此可绑定(bind)属性列在 <template> 上元素的 bindable改为属性:

nav-bar.html:

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

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

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