Angular 6如何将API返回的\n替换为<br>标签？

没问题！在Angular 6里处理换行符转<br>标签其实不难，你之前遇到问题主要是因为用了AngularJS的语法（ng-bind-html是老版本的写法），而且那个第三方包大概率是针对AngularJS开发的，自然在Angular 6里不生效。我给你两种靠谱的解决方案：

方案一：自定义Angular管道（推荐，无需第三方依赖） #

Angular 2+里已经不再使用filter，而是用**管道（Pipe）**来处理数据转换。你可以自己写一个简单的管道来实现换行符转<br>的功能：

1. 创建管道文件 #

在你的项目中新建一个nl2br.pipe.ts文件，内容如下：

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

@Pipe({ name: 'nl2br' })
export class Nl2brPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) {}

  transform(value: string): SafeHtml {
    // 如果传入的内容为空，直接返回
    if (!value) return value;
    // 将所有换行符替换为<br>标签
    const formattedContent = value.replace(/\n/g, '<br>');
    // 告诉Angular这段HTML是安全的，避免被转义
    return this.domSanitizer.bypassSecurityTrustHtml(formattedContent);
  }
}

2. 在模块中声明管道 #

打开你的模块文件（比如app.module.ts），把刚才创建的管道添加到declarations数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Nl2brPipe } from './nl2br.pipe'; // 引入管道
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    Nl2brPipe // 声明管道
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在模板中使用管道 #

现在你可以在模板里通过[innerHTML]结合管道来渲染内容（注意不能用{{}}，因为{{}}会把HTML标签转义成纯文本）：

<p [innerHTML]="x.deskripsi | nl2br"></p>

方案二：使用Angular 2+兼容的第三方包 #

如果你还是想用第三方包，一定要选择支持Angular 2+的版本（而非AngularJS的）。安装完成后，同样需要在模块中导入对应的模块，然后在模板里用[innerHTML]结合包提供的管道来使用，用法和自定义管道类似。不过自定义管道更轻量，不需要额外依赖，所以更推荐方案一。

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