Question

我试图在另一个元素中创建一个Aurelia元素。我正在使用phosphor中的停靠框架，当我动态创建一个面板时，我想添加一个我使用Aurelia构建的组件。

例如：我有一个非常简单的日志记录组件：

Logging.html

<template>
    <h1>Logging....</h1>
</template>

Logging.ts：

export class Logging {
    constructor() {
        console.log('Logging constructor')
    }
}

当我＆＃34;将它放在页面上时，该组件按预期工作＆＃34;。

现在在一些创建荧光Widget的方法中，我有类似的东西：

var widget = new Widget();
widget.title = "Got Logs?";
var contentElement = document.createElement('logging');
widget.node.appendChild(contentElement);
panel.insertBottom(widget);

在给定荧光面板的情况下，此代码创建一个Widget，创建一个看起来像<logging></logging>的元素，并将其附加到窗口小部件的内部节点。由此产生的＆＃34; DOM＆＃34;是正确的，但aurelia不会渲染元素。

我也尝试过像这样使用TemplatingEngine：

import { inject, TemplatingEngine } from 'aurelia-framework';

@inject(TemplatingEngine)
export class AureliaRoot {
    constructor(templatingEngine) { }

    attached() {
        var contentElement = document.createElement("logging"),
            el = document.getElementById("my-element");
        el.appendChild(contentElement);
        templatingEngine.enhance({element: el, bindingContext: {}});
    }
}

但这似乎不起作用，虽然我怀疑我正确使用它，我想我可能需要使用compile，真的不确定那里。

任何见解都将不胜感激。

Answer 1

我很抱歉我无法完全回答，但我相信您需要使用Aurelia ViewCompiler来编译生成的HTML片段，以便Aurelia解析它们。

请尝试查看以下链接以获取更多信息：How do you use ViewCompiler to manually compile part of the DOM?

在Aurelia创建元素

1 个答案: