在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模板中这些成分？或者也许还有其他方法如何在构建时决定使用哪个组件？

在此先感谢

答

我找到了我的问题的解决方案。使用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"); 
}

我认为这不是最好的解决办法，但它是一个工作之一。如果您有其他方法，请告诉我。

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

相关推荐