Uso innerHTML para representar contenido HTML en mi componente. Pero innerHTML elimina todos los atributos (por ejemplo, elimina los atributos de estilo) en el contenido HTML y lo representa. Pero necesita renderizar tal como está, y no quiere extraer ningún atributo del contenido HTML. ¿Hay algún equivalente a innerHTML o podemos lograr el resultado deseado con innerHTML? Gracias de antemano.
mi archivo de plantilla
<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">×</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 -->mi archivo componente
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>' }Mi salida actual es el contenido renderizado sin atributo de estilo. Pero el resultado deseado debe ser con atributo de estilo.
puede inyectar directamente dentro de su componente html.
Enlace 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>` } }Usando ViewChild.
import {ViewChild,ElementRef,Component} from '@angular/core'crear una variable local en la plantilla
<div #div ></div>consultar la variable local dentro de la clase de componente
@Component({...}) class MyComponent { @ViewChild('div') div:ElementRef; }acceder al elemento nativo dentro de cualquier función
this.div.nativeElement.innerHTML ="something";eso es todo. ☺
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>'); }o puede usar una tubería como se muestra en https://stackoverflow.com/a/41089093/217408