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

Question

I want to load angular template dynamically like this:

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 implementation:

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

This works fine on ng serve , but fails on ng build .
It throws following error:

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 is designed to achieve what the OP is after in a different way. You can create a property on the component which contains the HTML string. You can then use 'moustaches' in the component's template interpolate the string:

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

You can also use property binding: <div [innerHtml] = "propertyName"></div>

If the string is coming in dynamically, you will need use the property binding option, and inject DOMSanitizer to bring in html containing style tags.

DOMSanitizer has a few methods available (found in '@angular/platform-browser') for returning safe html, scripts, styles and some others.

Hope this helps

Answer 2

As error says, use function not the function expression:

getHTMLTemplate implementation:

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

To Be:

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

Answer 3

Without holding the function ref in a const ( source ) Try:

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.