Question

我想要实现的是动态生成的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>'
   }]

然后我将其传递给通过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问题所示，但不确定这是否是正确的方法。另一个想法可能是让我的服务处理输入对象的新密钥（可能是links），通过bypassSecurityTrustUrl进行清理，然后在已清理的HTML中注入安全链接。有没有明确的方法来做到这一点？感谢。

Angular4：SafeHtml中的SafeUrl

0 个答案: