Aurelia中的HTML組件和正常組件之間的區別？

我開始爲我的Aurelia開發使用標準的TypeScript框架。Aurelia中的HTML組件和正常組件之間的區別？

我想向「nav-bar」組件添加一些代碼，因此我決定將它從簡單的僅HTML組件轉換爲常規組件。爲此，我修改了需要標籤在我app.html來自：

<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當nav-bar僅爲HTML時，過去顯示的菜單現在缺失。

如何返回菜單？我究竟做錯了什麼？常規組件與純HTML組件有何不同？

感謝您的幫助， -Greg

來源

2016-04-05 Greg Sherman

顯示您的NAV-一個bar.html，app.js和應用html的。你可能在某處丟失了某些東西。 –

@FabioLuz，nav-bar.html和app.ts文件來自骨架應用程序的庫存，在這裏：https：//github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript/src –

在可綁定屬性在視圖模型中定義的標準自定義元素：

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>

來源

2016-04-05 23:46:08

Aurelia中的HTML組件和正常組件之間的區別？

回答

相關問題