Angular2 innerHTML удаляет свойство, помощь, необходимую для использования DomSanitizer

Question

Мне просто нужно ввести HTML в div с id"main-wrapper", так что в моем 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)

Почему мне нужно реализовать это - потому что, когда я внедряю innerHTML, я теряю свойство contenteditable="true"

Перед применением innerHTML мой код выглядит так, как показано ниже:

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

После применения innerHTML это становится:

<h1 _ngcontent-c2>Hii<h2>

Пожалуйста, помогите мне решить проблему

Answer 1

Вся методология angular основана на сокращении манипуляций с DOM с помощью сценария (например, того, что у вас есть), как это рекомендовано в http://angularjs.blogspot.com.au/2016/04/5-rookie-mistakes-to-avoid-with-angular.html.

Есть очень немного обстоятельств, когда манипулирование 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;

---

Согласно вашему комментарию:

Вы загружаете кучу html из localalstorage. В этом случае вам придется манипулировать DOM. В идеале я бы порекомендовал переконфигурировать эту архитектуру для повышения производительности, как указано выше.

Во-первых, загрузите HTML в машинописный текст...

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

2-й вставить 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,