Angular中Kendo Dialog无法渲染HTML模板问题求助

要让Kendo Dialog渲染HTML字符串而非显示标签，需要结合Angular的DomSanitizer处理安全HTML，并通过TemplateRef传递内容，具体步骤如下：

1. 导入并注入DomSanitizer
   在组件中导入DomSanitizer和SafeHtml，并在构造函数中注入：

   import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
   import { DialogService, DialogRef, DialogCloseResult } from "@progress/kendo-angular-dialog";
   
   constructor(
     private dialogService: DialogService,
     private sanitizer: DomSanitizer
   ) {}
   

2. 处理HTML字符串为安全格式
   将服务器返回的HTML字符串转换为Angular认可的SafeHtml类型：

   const template = '<br>Test'; // 替换为实际从服务器获取的HTML内容
   const safeHtmlContent: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(template);
   

3. 定义用于渲染HTML的模板
   在组件的模板文件中添加一个ng-template，通过innerHTML绑定安全HTML：

   <ng-template #htmlDialogTemplate let-content="content">
     <div [innerHTML]="content"></div>
   </ng-template>
   

4. 获取模板引用并打开Dialog
   在组件类中通过@ViewChild获取模板引用，然后在打开Dialog时将模板作为content传入，并通过data传递处理后的安全HTML：

   import { ViewChild, TemplateRef } from '@angular/core';
   
   export class YourComponent {
     @ViewChild('htmlDialogTemplate') htmlDialogTemplate!: TemplateRef<any>;
   
     openDialog() {
       const template = '<br>Test'; // 替换为实际从服务器获取的内容
       const safeHtmlContent: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(template);
   
       const dialog: DialogRef = this.dialogService.open({
         title: "Please confirm",
         content: this.htmlDialogTemplate,
         data: { content: safeHtmlContent }, // 将安全HTML传入模板上下文
         actions: [{ text: "No" }, { text: "Yes", themeColor: "primary" }],
         width: 450,
         height: 200,
         minWidth: 250
       });
     }
   }
   

关键说明 #

• bypassSecurityTrustHtml会绕过Angular的安全检查，务必确保服务器返回的HTML内容是可信的，避免XSS攻击风险。
• Kendo Dialog的content属性支持TemplateRef类型，通过data属性可以向模板传递上下文数据，实现动态渲染HTML。

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