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

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

getHTMLTemplate实现：

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

要成为：

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

Answer 2

不将函数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'],
})

working demo.

Answer 3

Angular旨在以其他方式实现OP的目标。您可以在包含HTML字符串（可以是动态的）的组件上创建一个属性。然后，您可以像这样从组件模板中使用插值将innerHtml属性简单地绑定到该属性：

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

那是最简单的方法。您还可以添加一个与n属性相对的innerHtml属性，我发现这是必要的，因为我必须注入DOMSanitizer来绕过Angular的安全措施以引入包含样式标签的html。因此，我的模板如下所示：

<div [innerHtml] = "propertyName"></div>

DOMSanitizer上有不同的方法（可在'@ angular / platform-browser'中找到），用于返回安全的html，脚本，样式等。

希望这会有所帮助

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

3 个答案: