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

Posted 2023-05-07

【中文标题】如何使用innerHTML在angular 2中附加HTML内容

【英文标题】：how to append HTML content in angular 2 using innerHTML

【发布时间】：2017-08-24 06:18:13

【问题描述】：

我使用 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 属性。

【问题讨论】：

“并将其附加到我的组件中”是什么意思？从来没有听说过这样的事情。请出示您的代码。见***.com/questions/31548311/angular-2-html-binding/…

请发布您迄今为止尝试过的代码。

听起来您需要使用 DomSanitazer，但就像 @Günter Zöchbauer 所说的那样 - 如果您粘贴一些您的代码或 plunker 会更容易提供帮助......

嘿@Manush 这对我来说很好用..

【参考方案1】：

你可以直接在你的组件 html 中注入。

Plunker 链接：

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>`
  

【参考方案2】：

使用 ViewChild。

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

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

<div #div ></div>

查询组件类内部的局部变量

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

访问任何函数内的原生元素

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

就是这样。 ☺

【讨论】：

这对我来说很好。但是如果我必须在同一个组件中再次做同样的事情怎么办？我不允许使用多个 viewchild 对吗？所以对于第二次使用，我需要使用一些其他的方式来附加 html 组件。我现在被困在这一点上......

【参考方案3】：

 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://***.com/a/41089093/217408中所示的管道

【讨论】：

如何将 file2.component.html 嵌入到 file1.component.html 中？

对不起，我不明白这个问题。我建议您创建一个包含更多详细信息的新文件。

对不起。我将尝试在这里解释，在上面的答案中，我们附加了一些段落

这个问题不是关于添加文件，而是关于添加 HTML 字符串。您可以使用 iframe 来显示 HTML 文件。

【参考方案4】：

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

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>';
    

现在您的指令已创建，您可以将此指令添加到您的app.module.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  

你必须在你的 html 中使用你的指令，你想在其中添加这个 html，如下面的代码：

<div add-html></div>

现在查看输出。

【参考方案5】：

在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>

希望它能解决你的问题:)