web-dev-qa-db-fra.com

comment ajouter du contenu HTML dans angular 2 à l'aide de innerHTML

J'utilise innerHTML pour rendre le contenu HTML dans mon composant. Mais innerHTML supprime tous les attributs (par exemple: supprime les attributs de style) du contenu HTML et le restitue. Mais il faut rendre le rendu tel quel et ne souhaite extraire aucun attribut du contenu HTML. Existe-t-il un équivalent de innerHTML ou pouvons-nous obtenir le résultat souhaité avec innerHTML? Merci d'avance.

mon fichier modèle

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

mon fichier de composant

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

}

Ma sortie actuelle est le contenu rendu sans l'attribut de style . Mais le résultat souhaité doit être avec l'attribut de style.

angularangular2-templateinnerhtml
6
Manush

vous pouvez directement injecter à l'intérieur de votre composant html.

Lien 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>`
  }
}
10
Rohan Fating

Utilisation de ViewChild.

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

créer une variable locale dans le modèle

<div #div ></div>

interroger la variable locale dans la classe de composant

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

accéder à l'élément natif à l'intérieur de n'importe quelle fonction

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

c'est tout. ☺

4
crook
 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>');
}

ou vous pouvez utiliser un tuyau comme indiqué dans https://stackoverflow.com/a/41089093/217408

4
Günter Zöchbauer

Je pense que la meilleure idée d'ajouter du HTML est de créer une directive:

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

et maintenant votre directive a été créée et vous devrez ajouter cette directive dans votre app.module.ts comme ci-dessous:

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

Vous devrez utiliser votre directive dans votre code HTML, où vous souhaitez ajouter ce code HTML, comme dans le code ci-dessous: 

<div add-html></div>

Maintenant, voyez la sortie.

0
Shubham Verma