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

Difference between HTML component and a normal component in Aurelia?

本文关键字：组件 之间 区别 HTML Aurelia      更新时间：2024-01-24

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

谢谢你的帮助，-Greg

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

导航栏.js:

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

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

导航栏.html:

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

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

<nav-bar router.bind="router"></nav-bar>
相关文章：