javascript - 在 `Component` 装饰器中动态加载 Angular 模板
问题描述
我想像这样动态加载角度模板:
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.
解决方案
Angular 旨在以不同的方式实现 OP 所追求的目标。您可以在包含 HTML 字符串的组件上创建一个属性。然后,您可以在组件的模板中使用 'moustaches' 插入字符串:
<div innerHtml="{{propertyName}}"></div>
您还可以使用属性绑定:
<div [innerHtml] = "propertyName"></div>
如果字符串是动态输入的,则需要使用属性绑定选项,并注入 DOMSanitizer 以引入包含样式标签的 html。
DOMSanitizer 有一些可用的方法(在“@angular/platform-browser”中找到)用于返回安全的 html、脚本、样式和其他一些方法。
希望这可以帮助
推荐阅读
- jquery - 从星期六到星期六的日期选择器选择
- android - 将 StorIO 与 AndroidX 和 Jetifier 一起使用
- python-3.x - 使用python从列表中查找特定项目
- scheme - 更多宏观问题
- android - Google Vision api:如何检测检测到的人脸是图像人脸还是真人脸?
- cmake - 如何将包含路径添加到 CMake?
- javascript - 如何在 Javascript 中为导出的 Excel 文件设置自定义名称
- angularjs - 输入字段立即执行任何编写的 js 代码
- linux-device-driver - 使用串口的 Linux 虚拟设备驱动程序
- android - 由于内部更改,CurrentWidget 不适用于 Nougat 及更高版本