包含一个组件作为插件的一部分

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');
}

这种方法抛出了这个错误：

GET 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");

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

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

Answer 1

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