Question

我正在尝试将editpage.ts中的html添加到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，我需要使用此属性来更改文本。

编辑1：请更新此我的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上，如果您动态添加它，则不会将其添加到您的代码中。如果要添加，则必须使用innerHTML的{{1}}。

这意味着您可以使用HTMLElement装饰器，也可以使用JQuery查找元素。但是使用Angular绑定无法工作。

希望这会有所帮助。

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

@ViewChild

编辑2 这是一个完全有效的组件：

@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>`;
}

在您的HTML页面中，您必须执行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添加动态HTML正在删除属性/属性

1 个答案: