angular - 如何使用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>'

}

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

最佳答案

您可以直接在组件html内注入(inject)。

柱塞链接:

https://plnkr.co/edit/lWR6q8?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 [innerHTML]="htmlContent"></h2>
    </div>
  `,
})
export class App {
  htmlContent:string;
  constructor() {
    this.htmlContent = `<p>This is my html coontent</p>`
  }
}

关于angular - 如何使用innerHTML在Angular 2中附加HTML内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43115899/