2

我想要实现的是一个动态生成的 html，其中包含一些静态链接。

所以，在一个组件中，我有一个对象数组：

 let list = [{
     type: 'container',
     title: 'SIMPLE LIST'
     description: '<ul>
       <li>
         <a href='/some/link#A'>A</a> // or [href] or routerLink+fragment
       </li>
       <li>
         <a href='/some/link#B'>B</a> 
       </li>
       <li>
         <a href='/some/link#C'>C</a>
       </li>
     </ul>'
   }, {
     type: 'container',
     title: 'SIMPLE ICON'
     description: '<mat-icon class="material-icons">launch</mat-icon>'
   }]

然后我将它传递给一个服务，该服务通过(from )清理description密钥：bypassSecurityTrustHtml()DomSanitzer

   export class myDynamicBuilder {

     content: Array<object>;         

     constructor(content, sanitizer) {
       content.forEach(each => {
         if (item.hasOwnProperty('description') && typeof item['description'] === 'string') {
           item['description'] = sanitizer.bypassSecurityTrustHtml(item['description'])
         }
       this.content = content
       })
     }
   }

然后在模板中：

<table *ngIf="(items?.content | filterContentBy: 'container').length">  
  <ng-template ngFor let-item [ngForOf]="(items?.content | filterContentBy:'container')">                   
    <tr>
      <td> 
        <b>{{item?.title}}</b>                                                                                 
      </td>
    </tr>                                                                                                      

    <tr>                                                                                                       
      <td colspan="2" class="second-row">                                                                      

        <p *ngIf="item.description" [innerHTML]="item.description"</p>
      </td>
    </tr>
  </ng-template>
</table>

字段中的链接description无法按预期工作。：

  • 如果href用作属性，则会触发应用程序的完全重新加载（这非常糟糕）

  • 如果routerLink使用该指令，则链接不起作用

  • 如果[href]使用，我会收到通常的 XSS 安全警告。所以，我回到文档，发现了方便的bypassSecurityTrustUrl功能。我修改了上述服务， [href]用 的输出替换字符串bypassSecurityTrustUrl，然后将结果扔到bypassSecurityTrustHtml函数中。得到了一个非常漂亮的 HTML，但有一个非功能性链接。

我应该如何处理这种情况？我正在考虑构建一些管道，如this question所示，但不确定这是否是正确的方法。另一个想法可能是让我的服务处理links输入对象的新键（可能是 ），通过过滤器进行清理bypassSecurityTrustUrl，然后在清理后的 HTML 中注入安全链接。有没有明确的方法来做到这一点？谢谢。

4

0 回答 0