Angular CLI中如何为动态文本添加多行？JSON文本换行失效求助

我太懂你踩的这个坑了！Angular默认的插值渲染逻辑会自动转义HTML内容，这就是为什么你的<br>标签变成了纯文本显示，完全起不到换行作用。下面给你一步步拆解解决办法：

问题根源 #

Angular的{{ }}插值表达式为了防范XSS攻击，会自动把所有HTML特殊字符转义成实体字符（比如<会被转成<）。哪怕你从JSON里读出来的是带<br>的字符串，用插值渲染的话，浏览器看到的还是转义后的文本，自然不会解析成换行标签。

解决方案1：用[innerHTML]替代插值表达式 #

这是最直接的解决方式，Angular的[innerHTML]属性绑定会把内容当作HTML来解析，而非纯文本。

比如你原来的代码是：

<div>{{ welcomeText }}</div>

直接改成：

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

只要你从JSON解析后的字符串是"Hello <br> This is a test."，浏览器就能正确识别<br>标签，实现换行效果。

解决方案2：处理JSON中转义的HTML内容 #

如果你的JSON文件里确实存的是<br>（也就是转义后的<br>），那解析出来的字符串其实是"Hello <br> This is a test."，这时候得先把转义的实体字符还原成真实的HTML标签，再用[innerHTML]绑定。

你可以写个简单的解码函数：

decodeHtml(html: string): string {
  const tempElement = document.createElement('textarea');
  tempElement.innerHTML = html;
  return tempElement.value;
}

然后在组件里处理内容：

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  template: '<div [innerHTML]="processedText"></div>'
})
export class WelcomeComponent {
  rawText: string = "Hello &lt;br&gt; This is a test."; // 从JSON读取的原始内容
  processedText: string;

  constructor() {
    this.processedText = this.decodeHtml(this.rawText);
  }

  decodeHtml(html: string): string {
    const tempElement = document.createElement('textarea');
    tempElement.innerHTML = html;
    return tempElement.value;
  }
}

重要安全提示！ #

如果你的JSON内容来自用户输入或其他不可信来源，直接用[innerHTML]可能存在XSS风险。这时候要用Angular的DomSanitizer把内容标记为安全的HTML：

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

@Component({
  selector: 'app-welcome',
  template: '<div [innerHTML]="safeText"></div>'
})
export class WelcomeComponent {
  rawText: string = "Hello <br> This is a test.";
  safeText: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    this.safeText = this.sanitizer.bypassSecurityTrustHtml(this.rawText);
  }
}

这样既能保证HTML标签正常解析，又能避免潜在的安全隐患。

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