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

我使用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>'

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“cr模板内容”，
templateUrl:“./app/channel.component.html”
})
导出类模板组件{
构造函数（）{
}
htmlContent='这是我的段落
'
}

我的当前输出是在没有“样式”属性的情况下渲染的内容。 但是理想的结果应该是带有style属性。

使用ViewChild

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

在模板中创建局部变量

<div #div ></div>

访问任何函数中的本机元素

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

就这样。☺

从'@angular/platform browser'导入{domsanizer}；
 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>');
}

.... 
htmlContent:任何；
构造函数（专用消毒器：DomSanitizer）{
this.htmlContent=this.sanitizer.bypassSecurityTrustHtml（“这是我的段落
”）；
}

---

或者您可以使用如所示的管道，我认为添加html的最佳方法是创建一个指令：

import { Directive,ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Directive({
    selector: '[add-html]'
})

export class TestDirectives{
    constructor(el:ElementRef,private sanitizer:DomSanitizer,private elementRef:ElementRef){
            this.elementRef.nativeElement.innerHTML ='<h1>Hello World</h1>';
    }
}

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 { }

<div add-html></div>

test.directive.ts:

import { Directive,ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Directive({
    selector: '[add-html]'
})

export class TestDirectives{
    constructor(el:ElementRef,private sanitizer:DomSanitizer,private elementRef:ElementRef){
            this.elementRef.nativeElement.innerHTML ='<h1>Hello World</h1>';
    }
}

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 { }

<div add-html></div>

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

import { Directive,ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Directive({
    selector: '[add-html]'
})

export class TestDirectives{
    constructor(el:ElementRef,private sanitizer:DomSanitizer,private elementRef:ElementRef){
            this.elementRef.nativeElement.innerHTML ='<h1>Hello World</h1>';
    }
}

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 { }

<div add-html></div>

---

现在查看输出。

您可以直接将html注入组件内部

Plunker链接：

@组件({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
htmlContent:字符串；
构造函数（）{
this.htmlContent=`这是我的html内容
`
}
}

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

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

文本：字符串；
恩戈尼尼特（）{
this.text=“这是新段落
”
}

在component.html文件中添加innerHTML属性，如我在下面提到的：

它将在div中追加文本值

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

这是新的段落

---

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

什么是“并将其附加到我的组件中”呢？从没听说过这样的事。请出示你的密码。请看，请发布您迄今为止尝试过的代码。听起来您需要使用DomSanitazer，但正如@Günter Zöchbauer所说的-如果您可以粘贴一些代码或plunker，帮助会容易得多…嘿@Manush这对我来说很好..我如何将file2.component.html嵌入file1.component.html？对不起，我不明白这个问题。我建议我创建一个新的更详细的。哦，很抱歉。我将尝试在这里解释，在上面的回答中，我们添加了一些段落。但是在我的例子中，这个段落存在于其他html文件中。我想将file2.html内容附加到file1.html中。我该怎么做？任何建议这个问题不是关于添加文件，而是关于添加HTML字符串。您可以使用iframe来显示HTML文件。这对我来说很好。但是，如果我必须在同一个组件中再次执行相同的操作，该怎么办？我不允许使用多视图儿童，对吗？因此，对于第二种用法，我需要使用其他方法来附加html组件。我被困在这一点上有一段时间了。。。