在Angular中,我们可以使用模板语法来渲染HTML。下面是一个使用Angular和TypeScript的示例,演示如何在模板中渲染HTML。
首先,我们创建一个Angular组件,并在其中定义一个变量,用于保存要渲染的HTML内容。
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
htmlContent: string = 'Hello, Angular!
';
}
在模板中,我们使用[innerHTML]
指令将htmlContent
变量的值作为HTML内容进行渲染。
接下来,我们使用这个组件来显示渲染的HTML。
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
最后,我们在index.html
中引入
来显示渲染的HTML。
index.html:
Angular Render HTML
这样,当应用启动时,Angular会将 请注意,使用htmlContent
中的HTML渲染到[innerHTML]
指令时要小心,确保渲染的HTML内容是可信的,以避免潜在的安全风险。相关内容