Question

我尝试通过代码动态编写组件（而不是<compose>）并将其从服务添加到DOM（类似于弹出窗口）。

根据我的理解，最好的方法是使用TemplatingEngine通过.compose方法。

我找不到一份体面的文件或关于如何使用它的小样本。

这是我到目前为止所拥有的

constructor(
    loggerFactory: LoggerFactory,
    private bindingEngine: BindingEngine,
    private templatingEngine: TemplatingEngine,
    private container: Container,
    private viewResources: ViewResources
) {

    const hostee = this.templatingEngine.compose({
        host: document.body,
        container: this.container,
        bindingContext: {

        },
        viewModel: SnackbarHostElement,
        viewResources: this.viewResources,
        viewSlot: new ViewSlot(document.body, true)
    });

    hostee.then(x => {
        x.attached();
    });

我没有收到任何错误，.then正在被触发，但是，该组件似乎没有呈现。任何帮助，将不胜感激！

Answer 1

这是最终代码（感谢@Fabio）

async init(): Promise<View | Controller> {
    const viewController = await this.templatingEngine.compose({
        host: document.body,
        container: this.container,
        bindingContext: {

        },
        viewModel: this.container.get(SnackbarHostElement),
        viewResources: this.viewResources,
        viewSlot: new ViewSlot(document.body, true)
    });
    viewController.attached();
    return viewController;
}

Answer 2

我只是使用这种方法，希望对您有所帮助！

const View = await this.templatingEngine.compose({
    host: this.element,
    container: this.container,
    bindingContext: this.bindingContext,
    overrideContext: this.overrideContext,
    viewModel: this.container.get(CustomComponent),
    viewResources: this.viewResources,
    viewSlot: new ViewSlot(this.element, true),
});

Aurelia模板引擎撰写

2 个答案: