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

Question

我从Aurelia开发的标准TypeScript骨架开始.

我想在"nav-bar"组件中添加一些代码,因此我决定将其从简单的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组件有何不同？

谢谢你的帮助,-Greg

Answer 1

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

NAV-bar.js:

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

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

NAV-一个bar.html:

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

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

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