角度指令和插值不适用于动态 HTML 代码

Question

我想做的是将来自后端的文本作为角度模板的一部分进行渲染，并提供完整的功能，如插值和指令(ngfor-if，switch(。

以下是的一个简单示例

模板组件.ts

import { Component, OnInit } from '@angular/core';
import { MyService } from '../my.service';
@Component({
selector: 'app-template',
templateUrl: './template.component.html',
styleUrls: ['./template.component.scss']
})
export class TemplateComponent implements OnInit {
names: string[];
template: string;
constructor(
private myService: MyService
) { }
ngOnInit() {
this.myService.getTemplate('page-name').subscribe(data => {
// say data = <span *ngFor="let name of names">hello {{name}}</span>
this.template = data;
});
this.myService.getNames().subscribe(data => {
// say data = ['name 1', 'name 2', 'name 3']
this.names = data;
});
}
}

template.component.html

<div [innerHTML]="sample"></div>

电流输出

hello {{name}}

所需输出

hello name 1
hello name 2
hello name 3

这是我找到的最接近我需要的东西https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e

Answer 1

你不能像下面这样做吗。当数据更新时，您可以重新生成样本。

假设服务器响应(在您的情况下为http(后，您调用handleResponse((函数。

handleResponse(response) {
this.sample = `<span>hello <span>` + this.name + '</span></span>`;
// ...
}

您的HTML文件将保持相同的

以类似的方式，您可以使用if，elseect而不是inIf

通过这种方式，您可以构建应该显示的html。

Answer 2

应该是这样的：

name = `world!`;
sample = '<span>hello '+this.name+'</span>';

以及在html:中

<div [innerHTML]="sample"></div>

Answer 3

假设服务器响应(在您的情况下为http(后，您调用handleResponse((函数。

handleResponse(response) {
this.name = response.name
// ...
}

然后在HTML文件中

<span>hello <span>{{name}}</span></span>

这是正常的角度练习。而且它很容易实现