Angular2 innerHTML删除属性，使用DomSanitizer所需的帮助 [英] Angular2 innerHTML removes property, help needed to use DomSanitizer

问题描述

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

I simply need to inject HTML in a div with id "main-wrapper", so in my component.ts i am using this code

    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

When i run the code it says: SafeValue must use [property]=binding: abc

(请参见 http://g.co/ng/security#xss )

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

Why i need to implement this- Because when i am injecting innerHTML, i am loosing a property contenteditable="true"

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

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

应用innerHTML之后，它将变为:

<h1 _ngcontent-c2>Hii<h2>

请帮助我解决问题

推荐答案

angular背后的整个方法都基于

The whole methodology behind angular is anchored on reduction of DOM manipulation via script (such as what you have) as recommended in http://angularjs.blogspot.com.au/2016/04/5-rookie-mistakes-to-avoid-with-angular.html.

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

There are very few circumstances where manipulating the DOM directly is necessary. Angular 2 provides a set of powerful, high-level APIs like queries that one can use instead. Leveraging these APIs confers a few distinct advantages

...

当您手动操作DOM时，您会错过这些优势，最终最终编写出表达力较低的代码.

When you manipulate the DOM manually, you miss out on these advantages and ultimately end up writing less expressive code.

---

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

您应该利用模板引擎/结构指令(例如*ngFor *ngIf固有的角度).

You should make use of the templating engine / structural directives like *ngFor *ngIf inherent in angular.

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

---

根据您的评论:

您正在从localstorage加载一堆html.在这种情况下，您将必须操纵DOM.理想情况下，出于上述目的，我建议出于性能考虑重新配置此体系结构.

You are loading a bunch of html from localstorage. In this case, you will have to manipulate the DOM. Ideally i would recommend re-configuration of this architecture for performance purposes as stated in the aformentioned.

首先，将html加载到打字稿中...

1st, load the html into 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，否则不会生效.

drawbacks: css styling does not take effect unless it is defined as a global stylesheet styles.css instead of editsection.component.css.

这篇关于Angular2 innerHTML删除属性，使用DomSanitizer所需的帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！