Question

我使用innerHTML在我的组件中呈现HTML内容。但是innerHTML删除HTML内容中的所有属性（例如：删除样式属性）并呈现它。但需要按原样呈现，并且不想从HTML内容中提取任何属性。是否有任何与innerHTML等效的内容，或者我们是否可以使用innerHTML完成所需的结果。在此先感谢。

我的模板文件

<div id="more-info-box" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <div class="clearfix">
                    <div [innerHTML]="htmlContent" class="long-desc-wrap">
                    </div>
                </div>
            </div>
         </div>
    </div>
</div><!-- End Info box -->

我的组件文件

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


@Component({
  selector: 'cr-template-content',
  templateUrl: './app/channel.component.html'
})
export class TemplateComponent {
  constructor() {

  }

  htmlContent = '<p>This is my <strong style="color:red">Paragraph</strong></p>'

}

我当前的输出是没有样式属性的内容。但是期望的结果应该是样式属性。

Answer 1

使用ViewChild。

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

在模板中创建一个局部变量

<div #div ></div>

查询组件类

中的局部变量

@Component({...}) class MyComponent {
@ViewChild('div') div:ElementRef;
}

访问任何函数中的native元素

this.div.nativeElement.innerHTML ="something";

是的。 ☺

Answer 2

 import { DomSanitizer} from '@angular/platform-browser';
 .... 
 htmlContent:any;
    constructor(private sanitizer: DomSanitizer){
      this.htmlContent = this.sanitizer.bypassSecurityTrustHtml('<p>This is my <strong style="color:red">Paragraph</strong></p>');
}

或者您可以使用https://stackoverflow.com/a/41089093/217408

中显示的管道

Answer 3

我认为添加html的最佳方法是创建一个指令：

<强> test.directive.ts：

app.module.ts

现在您的指令已经创建，您可以将此指令添加到import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TestDirectives } from '../directives/test.directive'; @NgModule({ declarations: [ AppComponent, TestDirectives ], imports: [], providers: [], bootstrap: [AppComponent] }) export class AppModule { }中，如下所示：

<强> app.module.ts：

<div add-html></div>

您必须在html中使用您的指令，您要添加此html，如下面的代码所示：

.Encode(False)

现在看输出。

Answer 4

在component.ts文件中创建一个变量

text:string;
ngOnInit(){
   this.text= "<p>This is new paragraph</p>"
}

然后在component.html文件中添加innerHTML属性，如下所述：

<div [innerHTML]="text"></div>

它将文本值附加在div之内

<div><p>this is new paragraph</p></div>

我希望它能解决您的问题：）

如何使用innerHTML在角度2中附加HTML内容

4 个答案: