aurelia 模板中的自定义元素的别名答案

【问题标题】：aliasing custom elements in aurelia templatesaurelia 模板中的自定义元素的别名
【发布时间】：2017-10-18 19:18:42
【问题描述】：

我的问题是关于自定义元素的别名并在 aurelia 的 html 模板中使用它们。
作为设置，我正在使用最新的 webpack typescript 骨架https://github.com/aurelia/skeleton-navigation 这些是我的配置：

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

根据不同的配置 (webpack.config.a.js, webpack.config.b.js)，webpack 应该在构建时决定 component-a 或 component-b 是 bundle 的一部分。使用 configs webpack 编译，但在运行时抛出异常：

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

是否可以在 html 模板中实例化这些组件？或者也许还有其他方法可以在构建时决定使用哪个组件？

提前致谢

【问题讨论】：

标签： javascript typescript webpack aurelia

【解决方案1】：

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

我认为这不是最好的解决方案，但它是一个有效的解决方案。如果您有任何替代方法，请告诉我。

【讨论】：

【解决方案2】：

我怀疑代码中的某个位置只需 PLATFORM.moduleName("component-alias/component.html") 就足够了，并且不需要 compose

【讨论】：