HTML组件和Aurelia中普通组件的区别？答案

【问题标题】：Difference between HTML component and a normal component in Aurelia?HTML组件和Aurelia中普通组件的区别？
【发布时间】：2016-10-13 06:34:38
【问题描述】：

我从用于 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 组件有何不同？

感谢您的帮助， -格雷格

【问题讨论】：

显示您的 nav-bar.html、app.js 和 app.html。您可能在某处遗漏了什么。
@FabioLuz，nav-bar.html 和 app.ts 文件是来自骨架应用程序的库存，这里：github.com/aurelia/skeleton-navigation/tree/master/…

标签： javascript aurelia

【解决方案1】：

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

导航栏.js：

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

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

导航栏.html：

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

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

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

【讨论】：