Javascript Aurelia-如何为ViewCompiler注册视图资源？

我有一个基于行（类似于表）的自定义元素，它根据可绑定列属性动态呈现其模板。它以字符串形式组成行模板，并使用ViewCompiler、ViewFactory和View进行渲染

import {inject} from 'aurelia-dependency-injection';
import {bindable, ViewCompiler, ViewResources} from 'aurelia-templating';

@inject(ViewCompiler, ViewResources)
export class MyDynamicGrid {
    @bindable columns: any[];
    @bindable rows: any[];

    constructor(viewCompiler: ViewCompiler, viewResources: ViewResources) {
        const template = '<template><custom-element></custom-element></template>'; //this is rather complex in practice

        viewResources.registerElement('custom-element', /* HtmlBehaviorResource? */);
        this._viewFactory = viewCompiler.compile(template, viewResources);
    }

    _render() : void {
        const view = this._viewFactory.create(/* some container */);
        view.bind(someContext, someOverrideContext);
        //attach view to the DOM
    }
}

从“aurelia依赖项注入”导入{inject}；
从“aurelia模板”导入{bindable，ViewCompiler，ViewResources}；
@注入（ViewCompiler、ViewResources）
导出类MyDynamicGrid{
@可绑定列：任意[]；
@可绑定行：任意[]；
构造函数（viewCompiler:viewCompiler，viewResources:viewResources）{
const template=''；//这在实践中相当复杂
registereElement（'custom-element'，/*HtmlBehaviorResource？*/）；
这是._viewFactory=viewCompiler.compile（模板，viewResources）；
}
_render（）：void{
const view=this.\u viewFactory.create（/*some container*/）；
绑定（someContext，someOverrideContext）；
//将视图附加到DOM
}
}

在自定义模板包含标准HTML元素之前，这一切都很正常。一旦我开始将自定义元素放入模板中，它就会停止工作。它仍然呈现HTML，但是Aurelia没有附加自定义元素的行为

我知道，所有自定义元素都应该“注册”才能使用。“正常注册”可以通过

在视图中进行，也可以在视图模型

@viewResources

中进行，或者全局注册

但是，在这种特殊情况下，注入的

ViewCompiler

仅继承视图模型父级的视图资源。我的问题是：如何注册任何其他视图资源？我知道

viewciler

的

compile

方法中的第二个参数，但无法使其工作。如果我在全球范围内注册，这是我能让它工作的唯一方法

---

注意：这个问题的重点是注册视图资源。动态渲染工作得很好

我在解决同一问题时发现了您的问题，但我想我已设法使用

compile的
资源
参数使其工作。以下是我的设置：

我将编译打包到一个助手类中：

@autoinject
export class ViewFactoryHelper {
    constructor(resources, viewCompiler, container, loader) {
    }

    compileTemplate(html, bindingContext) {
        let viewFactory = this.viewCompiler.compile(html, this.resources);
        let view = viewFactory.create(this.container);
        view.bind(bindingContext);
        return view;
    }
}

然后客户端看起来像这样：

@autoinject
export class SomethingToCreateDynamicControls {
    constructor(viewFactoryHelper, myCustomConverter, anotherCustomConverter) {
        viewFactoryHelper.resources.registerValueConverter('myCustomConverter', myCustomConverter);
        viewFactoryHelper.resources.registerValueConverter('anotherCustomConverter', anotherCustomConverter);
    }

    makeControl(model) {
        let html = '...'; // HTML that uses those converters in normal way
        let compiledTemplate = this.viewFactoryHelper.compileTemplate(html, model);
        // ...
    }
}

更新：到目前为止，我无法调用
registerElement
而不是
registerValueConverter
来达到预期效果，因此我的答案可能还不是一个好答案。我会继续尝试…
我通过深入docs+github找到了一个解决方案。我为两种不同的方法创建了两个示例：

手动创建
HtmlBehaviorResource
实例，这是为了注册一个特定元素
样本（基于：）

备注：行
resource.register（this.\u viewResources）
相当于
this.\u viewResources.registerElement（'custom-element'，resource）。唯一的区别是第一个从约定或装饰器中读取名称

使用
ViewEngine
并导入整个模块。如果从不同的文件导入多个资源，甚至不同的类型（属性、元素、转换器等），这更合适
样本：

import {CustomElement} from 'my-components/my-custom-element';
import {inject} from 'aurelia-dependency-injection';
import {ViewCompiler, ViewResources, ViewEngine} from 'aurelia-templating';

@inject(ViewCompiler, ViewResources, ViewEngine)
export class MyDynamicGrid {

    //bindables and constructor is ommitted

    init(): void {
        this._viewEngine
            .importViewResources(['my-components/my-custom-element'], [undefined], this._viewResources)
            .then(() => {
                this._viewFactory = viewCompiler.compile(template, this._viewResources);
            });
    }
}

例如，我要寻找的是如何注册自定义元素？我假设它有一个用于解析的字符串名和一个视图模型，可选的模板不重复上述问题，动态视图创建/渲染工作正常。但是，我想举一个如何注册视图资源的例子。是的，关键是如何使用
registerement
。我知道
viewsources
可以被注入，我已经在做了（我不认为这有什么关系，但还是把它放在示例中）。但是这个
viewResources
将只包含来自外部上下文的资源（自定义元素、属性、转换器、行为）。我需要手动注册一个元素，相当于视图模板中的一个
。我发布了这个问题，希望一些Aurelia成员能快速回答。但既然没有发生，我就深入到docs/github中去看看。希望我能很快发布一个答案：）你解决了这个问题吗？我也在寻找一种方法来解决这个问题，这个答案对我来说很有效。下一步，是否有方法导入模板本身中由标记定义的资源？
import {CustomElement} from 'my-components/my-custom-element';
import {inject} from 'aurelia-dependency-injection';
import {ViewCompiler, ViewResources, ViewEngine} from 'aurelia-templating';

@inject(ViewCompiler, ViewResources, ViewEngine)
export class MyDynamicGrid {

    //bindables and constructor is ommitted

    init(): void {
        this._viewEngine
            .importViewResources(['my-components/my-custom-element'], [undefined], this._viewResources)
            .then(() => {
                this._viewFactory = viewCompiler.compile(template, this._viewResources);
            });
    }
}