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

Question

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

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.

Answer 1

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

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

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

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

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

希望这可以帮助

Answer 2

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

getHTMLTemplate实现：

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

成为：

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

Answer 3

如果不将函数 ref 保存在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'],
})

工作演示。