将动态 HTML 从组件添加到 HTML 正在删除属性/属性

Question

我正在尝试将 html 从 editpage.ts 添加到 editpage.html

editpage.ts

var strHTML = '<p [contentEditable]="contentEditable" >abc<p>';
this.possibleHTML = strHTML;
 this.possibleHTML = this.possibleHTML.map(value => this._sanitizer.bypassSecurityTrustHtml(value));

editpage.html

<div  id="main-wrapper">   
    <content *ngIf="possibleHTML">
           <div [innerHtml]="possibleHTML"></div>
    </content>
</div>

当这个被插入，然后在开发者工具中，它看起来像这样

<h1 _ngcontent-c2>Hii<h2>

我的[contentEditable]="contentEditable" 属性消失了。我需要动态注入 HTML，我需要这个属性来更改文本。

编辑

我的component.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-filemanager',
  templateUrl: './filemanager.component.html',
  styleUrls: ['./filemanager.component.css']
})
export class FilemanagerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
this.document.getElementById("main-wrapper").innerHTML += "<p [contentEditable]="contentEditable" >abc<p>";
  }

}

现在我想要的是，我的属性不应该丢失。

Answer 1

不久前我自己也遇到过这个问题。问题在于 contentEditable 如果您动态添加它，它将不会添加到您的标签中。如果要添加它，则必须使用HTMLElement 的innerHTML。

这意味着您可以使用 @ViewChild 装饰器，或者使用 JQuery 来查找您的元素。但它不能通过使用 Angular 绑定来工作。

希望这会有所帮助。

编辑这是在我的项目中工作的示例：

@ViewChild('itcamStr') itcamStr: ElementRef; 

// ... Doing other stuff in my component 

randomFunction() {
    // ... Doing stuff not related before
    this.itcamStr.nativeElement.innerHTML += this.buildLabel('string', 'type');
}

buildLabel(s: string, type: string): string {
    return `<label class="label label-${type} itcam-label" contenteditable="false">${s}</label>`;
}

EDIT 2这是一个完整的组件：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my',
  template: '<div #child></div>',
})
export class MyComponent implements OnInit {
    @ViewChild('child') child: ElementRef;

    ngOnInit() {
        this.child.nativeElement.innerHTML = `<p contenteditable>Editable Content</p>`;
    }
}

在您的 HTML 页面中，您只需执行 <my></my>。