将组件作为插件

Question

初步问题

如果有的话，我们如何从插件中公开view/view-model component？例如，我们有以下内容：

// ./open-id/foo-bar.html
<template>
    <p>FooBar</p>
</template>

// ./open-id/foo-bar.ts
export class FooBar { }

在消费应用程序中，我们希望这样做：

// ./app.html
<require from="open-id/foo-bar"></require>
<foo-bar></foo-bar>

编辑

更简单的名称

根据Robinson Collado的回答，我们使用更简单的名称（foo而非foo-bar）来降低复杂性。

// ./open-id/foo.html
<template>
    <p>Foo</p>
</template>

// ./open-id/foo.ts
export class Foo { }

// ./app.html
<require from="open-id/foo"></require>
<foo></foo>

这种方法引发了这个错误：

  

未处理的拒绝错误：模块的加载超时：template-registry-entry！open-id / foo.html，text！open-id / foo.html

全球资源

根据Installing Plugins文档，我们尝试将组件添加为全局资源。

// ./open-id/open-id.ts
function configure(config: FrameworkConfiguration) {
    config.globalResources('./foo');
}

这种方法引发了这个错误：

  

获取http://localhost:9000/src/open-id/open-id/foo.js 404（未找到）

这意味着Aurelia正在寻找open-id/open-id/中的组件，这个目录太深了。

作为插件加载

在开发插件的过程中，我们正在加载这样的插件，这可能就是为什么Aurelia看起来太深了。在开发过程中，我们如何以不同方式加载插件？

// ./main.ts
aurelia.use.plugin("./open-id/open-id");

作为功能加载

aurelia.use.feature("./aurelia-open-id-connect");

对于从我们的功能接收注入的每个构造函数，现在出现错误。

  

消息：键/值不能为null或未定义。您是否尝试注入/注册DI不存在的东西？

Answer 1

尝试将自定义标记<foo-bar></foo-bar>的名称更改为<foobar></foobar>。标记的名称应与其视图模型类的名称相匹配。除非，如果使用@customElement装饰器显式声明自定义元素的标记名称。