在aurelia模板中混淆自定義元素

我的問題是關於混淆自定義元素並在aurelia的html模板中使用它們。
由於設置我使用的是最新的WebPack打字稿骨架https://github.com/aurelia/skeleton-navigation ，這些都是我的CONFIGS：在aurelia模板中混淆自定義元素

webpack.config.a.js

... 
resolve: { 
    extensions: ['.ts', '.js'], 
    modules: [srcDir, 'node_modules'], 
    alias: { 
    "component-alias": path.resolve(__dirname, "./src/component-a") 
    } 
}, 
...

app.html

<template> 
    <require from="component-alias/component"></require> 
    <require from="./nav-bar.html"></require> 

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

    <div class="page-host"> 
    <router-view></router-view> 
    </div> 
    <component></component> 
</template>

文件結構：

src 
|----component-a 
| |----component.html 
| |----component.ts 
| 
|----component-b 
| |----component.html 
| |----component.ts 
| 
|----app.html 
|----app.ts 
| 
|... 
| 
webpack.config.a.js 
webpack.config.b.js

根據不同CONFIGS（webpack.config.a.js, webpack.config.b.js）的WebPack應在生成時決定是否部件-a或組分-b是包的一部分。隨着CONFIGS的WebPack編譯但在運行時會拋出異常：

Error: Unable to find module with ID: component-alias/component.html

是否有可能實例化的HTML模板中這些成分？或者也許還有其他方法如何在構建時決定使用哪個組件？

在此先感謝

來源

2017-10-18 masquo

我找到了我的問題的解決方案。使用aurelia的內置compose元素會有訣竅。

app.html

<template>  
    <require from="./nav-bar.html"></require> 

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

    <div class="page-host"> 
    <router-view></router-view> 
    </div> 
    <compose view-model.bind="componentPath" 
      view.bind="componentTemplatePath"></compose> 
</template>

app.ts

import { PLATFORM } from "aurelia-pal"; 
... 
public bind() { 
    this.componentPath = PLATFORM.moduleName("component-alias/component"); 
    this.componentTemplatePath = PLATFORM.moduleName("component-alias/component.html"); 
}

我認爲這不是最好的解決辦法，但它是一個工作之一。如果您有其他方法，請告訴我。

來源

2017-10-21 21:43:58 masquo

在aurelia模板中混淆自定義元素

回答

相關問題