Angular中能否在TypeScript变量中同时存储HTML与普通文本？

当然可以实现，核心是让前端框架跳过默认的HTML转义逻辑，直接渲染原生HTML内容。以下是主流前端框架的具体实现方式：

React 实现方式 #

React默认会转义所有HTML内容，要渲染包含标签的文本，需使用dangerouslySetInnerHTML属性：

// 定义包含普通文本和HTML链接的TS变量
const displayContent = `这是一段普通文本，<a href="/example-page">点击跳转示例页面</a>`;

function RenderContent() {
  return <div dangerouslySetInnerHTML={{ __html: displayContent }} />;
}

注意：如果内容来自用户输入，必须先做XSS过滤（比如用DOMPurify处理），避免安全风险。

Vue 实现方式 #

Vue提供了v-html指令，直接用于渲染包含HTML的内容：

<template>
  <div v-html="displayContent"></div>
</template>

<script setup lang="ts">
const displayContent = `这是一段普通文本，<a href="/example-page">点击跳转示例页面</a>`;
</script>

同样，若内容包含用户输入，需提前做安全校验，防止注入攻击。

Angular 实现方式 #

Angular默认会转义HTML，需通过[innerHTML]绑定渲染原生内容：

<!-- 模板文件 -->
<div [innerHTML]="displayContent"></div>

// 组件文件
import { Component } from '@angular/core';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html'
})
export class ContentComponent {
  displayContent = `这是一段普通文本，<a href="/example-page">点击跳转示例页面</a>`;
}

如果是信任的自定义内容，可通过DomSanitizer标记为安全HTML，避免框架的安全拦截：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html'
})
export class ContentComponent {
  displayContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    const rawContent = `这是一段普通文本，<a href="/example-page">点击跳转示例页面</a>`;
    this.displayContent = this.sanitizer.bypassSecurityTrustHtml(rawContent);
  }
}

内容的提问来源于stack exchange，提问作者Nayan J