Question

我的问题是关于别名自定义元素并在aurelia的html模板中使用它们设置我使用最新的webpack打字稿框架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），如果component-a或component-b是bundle的一部分，webpack应该在构建时决定。使用configs编译configs但在运行时抛出异常：

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

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

提前致谢

Answer 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");
}

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

Answer 2

我怀疑代码中某处PLATFORM.moduleName("component-alias/component.html")就够了，不需要compose

在aurelia模板中对自定义元素进行别名处理

2 个答案: