Angular路由传参如何保留<strong>等HTML格式？

问题原因 #

Angular的插值表达式{{}}会自动转义HTML实体（比如把<转成<），所以你传递的带<strong>标签的字符串会被当作纯文本输出，无法解析成HTML元素。

方案一：使用innerHTML结合安全标记（适用于需要传递带格式内容的场景） #

1. 在目标组件中引入并注入DomSanitizer

   import { Component, OnInit } from '@angular/core';
   import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
   
   @Component({
     selector: 'app-success',
     templateUrl: './success.component.html',
     styleUrls: ['./success.component.css']
   })
   export class SuccessComponent implements OnInit {
     message!: SafeHtml;
   
     constructor(private sanitizer: DomSanitizer) {}
   
     ngOnInit(): void {
       // 将HTML字符串标记为安全可信任的内容
       this.message = this.sanitizer.bypassSecurityTrustHtml(history.state.data?.message);
     }
   }
   

2. 修改模板使用[innerHTML]绑定

   <p style="text-align: center;" [innerHTML]="message"></p>
   

   注意：仅当你完全信任传递的HTML内容时使用此方法，避免XSS攻击风险。你的场景中内容为自行生成，无不可信输入，可安全使用。

方案二：拆分数据传递（更安全的最佳实践） #

不传递带HTML标签的字符串，单独传递需要强调的数据（如email），在目标组件模板中直接构建格式：

1. 跳转时传递原始数据

   if (res.Success === true) {
     let email = this.form.value.email
     this._router.navigate(['success'], {state : {data : {email: email}}}) 
   }
   

2. 目标组件读取数据

   this.email = history.state.data?.email;
   

3. 模板中直接构建格式

   <p style="text-align: center;">Your preference for <strong>{{email}}</strong> has been successfully updated !</p>
   

这种方式无需处理HTML字符串，完全利用Angular模板特性，更安全且符合组件化开发思路。

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