Question

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

我想在＆＃34; nav-bar＆＃34;中添加一些代码。组件，所以我决定将它从简单的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值， BUT 当导航栏仅用于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>

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

1 个答案: