在 `Component` 装饰器中动态加载 Angular 模板答案

【问题标题】：Dynamically load Angular template in `Component` decorator在 `Component` 装饰器中动态加载 Angular 模板
【发布时间】：2018-12-20 09:16:34
【问题描述】：

我想像这样动态加载角度模板：

import { getHTMLTemplate } from './util';

const dynamicTemplate = getHTMLTemplate(); 

@Component({
    selector: 'app-button',
    // templateUrl: './button.component.html',
    template: `
        <div">
            some div
        </div>
        ${dynamicTemplate}
    `,
    styleUrls: ['./button.component.less'],
})

getHTMLTemplate 实现：

export function getHTMLTemplate(){
    return `<div>dynamic div</div>`;
};

这在ng serve 上运行良好，但在ng build 上失败。
它抛出以下错误：

src/util.ts(5,32): Error during template compile of 'AppComponent'
  Function calls are not supported in decorators but 'getHTMLTemplate' was called.

【问题讨论】：

你搞定了吗？

标签： javascript html angular typescript

【解决方案1】：

Angular 旨在以不同的方式实现 OP 的目标。您可以在包含 HTML 字符串的组件上创建一个属性。然后，您可以在组件的模板中使用 'moustaches' 插入字符串：

<div innerHtml="{{propertyName}}"></div>

您还可以使用属性绑定： <div [innerHtml] = "propertyName"></div>

如果字符串是动态进入的，你需要使用属性绑定选项，并注入 DOMSanitizer 来引入包含样式标签的 html。

DOMSanitizer 有一些可用的方法（在“@angular/platform-browser”中找到）用于返回安全的 html、脚本、样式和其他一些方法。

希望对你有帮助

【讨论】：

他正在尝试编译一个动态模板，而不仅仅是html。
是的。实际上我只是编辑了我的答案，我现在的理解比我回答时更好。

【解决方案2】：

正如错误所说，使用函数而不是函数表达式：

getHTMLTemplate 实现：

export const getHTMLTemplate = () => {
    return `<div>dynamic div</div>`;
};

未来：

export const getHTMLTemplate() {
    return `<div>dynamic div</div>`;
};

【讨论】：

现在我得到`装饰器不支持函数调用，但调用了'getHTMLTemplate'。`

【解决方案3】：

不要在const (source) 中保存函数引用：

export  function getHTMLTemplate() {
    return `<div>dynamic div</div>`;
};

@Component({
    selector: 'app-button',
    // templateUrl: './button.component.html',
    template: `
        <div">
            some div
        </div>
        ${getHTMLTemplate()}
    `,
    styleUrls: ['./button.component.less'],
})

working demo.

【讨论】：

现在我收到Function calls are not supported in decorators but 'getHTMLTemplate' was called.
那是function 不是const @AkshayM
我正在使用function，您可以查看更新的问题。
@AkshayM 问题是 AoT 非常严格，需要函数声明，而不是包含函数引用的 const。
@AkshayM 但是那里的演示可以工作，怎么不工作？