要在Angular中渲染HTML,可以使用innerHTML属性或者使用Angular的内置管道。 以下是两种方法的示例代码:
标签中。
组件的HTML模板:
组件的TypeScript代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
htmlContent = 'Hello, Angular!';
}
标签中。
组件的HTML模板:
组件的TypeScript代码:
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
htmlContent: SafeHtml;
constructor(private sanitizer: DomSanitizer) {
this.htmlContent = this.sanitizer.bypassSecurityTrustHtml('Hello, Angular!');
}
}
在上述代码中,我们使用了DomSanitizer服务来通过bypassSecurityTrustHtml方法将HTML代码转换为安全的HTML内容,以避免安全风险。然后,将转换后的安全HTML内容赋值给htmlContent变量。最后,我们在HTML模板中使用safeHtml管道来渲染该内容。