Angular对话框中如何插入换行符？\n转义换行不生效问题

HTML默认会将文本中的\n识别为普通空白字符，不会渲染为实际换行，加上你当前模板用原生属性写法书写插值，本身不符合Angular的绑定规则，双重问题导致换行效果失效。另外你贴出的TS方法末尾多了一个多余的.，会触发语法错误，需要先删掉。

• 方案1：通过CSS控制空白渲染（最优方案，无需修改现有字符串逻辑）
  给按钮添加white-space样式规则，让浏览器主动识别文本中的换行符：

  /* 在对应组件的样式文件中添加 */
  button {
    white-space: pre-line;
  }
  

  pre-line规则会保留文本内的\n换行符，自动合并多余普通空格、适配容器宽度折行，非常适合按钮这类短文本场景。如果需要完全保留文本里的所有空格、缩进格式，可以替换为white-space: pre。
  同时修正模板的绑定写法，原生属性写法无法正确解析插值表达式的返回值，要改用Angular的标准绑定语法：

  <!-- 如果body是按钮的自定义属性，用attr前缀绑定 -->
  <button [attr.body]="'Do you confirm? \n' + myFunction()"></button>
  
  <!-- 如果是要在按钮内部显示文本，直接把内容写在标签内部即可 -->
  <button>Do you confirm? \n {{myFunction()}}</button>
  

  修正后的TS方法参考：

  myFunction = (): string => {
    return 'hello \n world';
  }
  

• 方案2：替换换行符为HTML换行标签
  如果不想调整CSS，可以在TS逻辑中把字符串里的\n替换为HTML的<br>标签，配合innerHTML绑定完成渲染：
  先修改TS方法的返回逻辑：

  myFunction = (): string => {
    return 'hello \n world'.replace(/\n/g, '<br>');
  }
  

  模板中用innerHTML绑定内容，Angular不会对绑定内容里的合法HTML标签做转义：

  <button [innerHTML]="'Do you confirm? <br>' + myFunction()"></button>
  

  注意：如果绑定的内容包含用户输入的非可信文本，使用innerHTML会存在XSS安全风险，仅当内容为内部固定业务文本时可放心使用。

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