Angular项目中如何在ts文件为多个拼接字符串添加等效<br>的换行效果

方案1：使用换行符+CSS实现（最小改动） #

你可以在TS拼接字符串时插入\n换行符，配合CSS的white-space属性实现和<br>完全一致的换行效果，不需要修改现有组件的传参逻辑：

1. 修改TS拼接逻辑：

// 段落之间插入换行符
this.myContent= this.content.paragraph1 + '\n' + this.content.paragraph2 + '\n' + this.content.paragraph3;

2. 在my-component内部给展示myContent的DOM元素添加样式：

/* 会自动识别文本中的\n作为换行符 */
.content-wrapper {
  white-space: pre-line;
}

方案2：传入段落数组由组件内部渲染（更易扩展） #

如果后续段落数量可能变动，推荐直接传数组到组件，内部拆分渲染，不需要提前拼接字符串：

1. TS中整理段落为数组：

this.myParagraphs = [this.content.paragraph1, this.content.paragraph2, this.content.paragraph3];

2. 父组件传参修改为传数组：

<my-component [myParagraphs]="myParagraphs"></my-component>

3. my-component内部接收数组并循环渲染：
   组件TS中声明输入：

@Input() myParagraphs: string[] = [];

组件模板渲染：

<p *ngFor="let paragraph of myParagraphs">{{ paragraph }}</p>

默认自带段落间距，也可以自定义样式调整换行效果，后续增减段落只需要修改数组即可。

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