Question

我只需要在id "main-wrapper"的div中插入HTML，因此在我的component.ts中我使用此代码

    import { Component, OnInit, ElementRef,Renderer2,Inject } from '@angular/core';
    import { Pipe } from '@angular/core';
    import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

    @Component({
      selector: 'app-editsection',
      templateUrl: './editsection.component.html',
      styleUrls: ['./editsection.component.css']
    })

    export class EditsectionComponent implements OnInit {
    ...//some code

    constructor(
        @Inject(DOCUMENT) private document: any,
        private route: ActivatedRoute,
      private elRef: ElementRef,
      private el: ElementRef,
      private _sanitizer:DomSanitizer
      ) { }

    ngOnInit() {
    var strHTML = '<p>abc<p>';
     this.document.getElementById("main-wrapper").innerHTML += this._sanitizer.bypassSecurityTrustHtml(strHTML);

    ...
    }
    }

当我运行代码时，它说： SafeValue必须使用[property] = binding： ABC

（见http://g.co/ng/security#xss）

为什么我需要实现这一点 - 因为当我注入innerHTML时，我正在丢失一个属性contenteditable="true"

在应用innerHTML之前，我的代码如下所示：

<h1 _ngcontent-c2 contenteditable="true">Hii<h2>

应用innerHTML后，它变为：

<h1 _ngcontent-c2>Hii<h2>

请帮我解决问题

Answer 1

角度背后的整个方法是基于http://angularjs.blogspot.com.au/2016/04/5-rookie-mistakes-to-avoid-with-angular.html中建议的脚本（例如你拥有的）减少DOM操作。

在极少数情况下，直接操作DOM是必要的。 Angular 2提供了一组功能强大的高级API，例如可以使用的查询。利用这些API可以带来一些明显的优势

...

当您手动操作DOM时，您会错过这些优势，并最终编写代码较少的代码。

所以不要使用它：this.document.getElementById("main-wrapper").innerHTML +=

你应该使用像角色固有的*ngFor *ngIf这样的模板引擎/结构指令。

// .html
<div class="main-wrapper"><p *ngIf="showabc">abc</p></div>
// .ts
var showabc: Boolean = true;

根据您的评论：

您正在从localstorage加载一堆html。在这种情况下，您将不得不操纵DOM。理想情况下，我建议为性能目的重新配置此体系结构，如前面所述。

1，将html加载到typescript ...

public possibleHTML: Array; 
constructor(private sanitizer: DomSanitizer){}
ngOnInit(){  
   this.possibleHTML = loadContentFromLocalStorage();
   this.possibleHTML = this.possibleHTML.map(value => this.sanitizer.bypassSecurityTrustHtml(value));
}

第二次插入html。

<div class="main-wrapper">
    <content *ngIf="possibleHTML">
       <div *ngFor="let html of possibleHTML">
           <div *ngIf="html.makevisible" [innerHtml]="html"></div>
       </div>
    </content>
</div>

缺点：除非将CSS定义为全局样式表styles.css而不是editsection.component.css，否则css样式不会生效。

Angular2 innerHTML删除属性，帮助使用DomSanitizer

1 个答案: