Encuadernación en HTML angular

Estoy escribiendo una aplicación angular y tengo una respuesta HTML que quiero mostrar.

¿Cómo puedo hacer eso? Si simplemente uso la syntax de enlace {{myVal}} , codifica todos los caracteres HTML (por supuesto).

Necesito de alguna manera vincular el html interno de un div al valor de la variable.

La syntax correcta ahora es la siguiente:

 

Trabajando en 6.1.3

Referencia de documentación

Angular 2.0.0 y Angular 4.0.0 final

Para contenido seguro solo

 

DOMSanitizer

El posible HTML inseguro debe marcarse explícitamente como de confianza con el sanitizador DOM de Angulars, por lo que no elimina partes potencialmente peligrosas del contenido

 

con una pipa como

 @Pipe({name: 'safeHtml'}) export class Safe { constructor(private sanitizer:DomSanitizer){} transform(style) { return this.sanitizer.bypassSecurityTrustHtml(style); //return this.sanitizer.bypassSecurityTrustStyle(style); // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs } } 

Ver también en RC.1 algunos estilos no se pueden agregar usando la syntax de enlace

Y documentos: https://angular.io/api/platform-browser/DomSanitizer

Advertencia de seguridad

Confiar en que el usuario agregó HTML puede suponer un riesgo de seguridad. El estado de documentos mencionado anteriormente:

Llamar a cualquiera de las API bypassSecurityTrust... inhabilita la sanitización incorporada de Angular para el valor transferido. Revise y bypassSecurityTrust... cuidadosamente todos los valores y rutas de código que entran en esta llamada. Asegúrese de que todos los datos de usuario se escapen adecuadamente para este contexto de seguridad. Para obtener más detalles, consulte la Guía de seguridad .

Marcado angular

Algo como

 class FooComponent { bar = 'bar'; foo = `
{{bar}}
`;

con

 

no hará que Angular procese nada específico de Angular en foo . Angular reemplaza marcado específico angular en tiempo de comstackción con código generado. El marcado añadido en el tiempo de ejecución no será procesado por Angular .

Para agregar HTML que contiene marcado específico de Angular (propiedad o enlace de valor, componentes, directivas, tuberías, …) es necesario agregar el módulo dynamic y comstackr componentes en tiempo de ejecución. Esta respuesta proporciona más detalles. ¿Cómo puedo usar / crear una plantilla dinámica para comstackr componentes dynamics con Angular 2.0?

[innerHtml] es una gran opción en la mayoría de los casos, pero falla con cadenas realmente grandes o cuando necesita un estilo codificado en html.

Me gustaría compartir otro enfoque:

Todo lo que necesita hacer es crear un div en su archivo html y darle una identificación:

 

Luego, en su componente Angular 2, cree una referencia a este objeto (escriba aquí):

 import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ templateUrl: "some html file" }) export class MainPageComponent { @ViewChild('dataContainer') dataContainer: ElementRef; loadData(data) { this.dataContainer.nativeElement.innerHTML = data; } } 

Luego simplemente use la función loadData para agregar texto al elemento html.

Es solo una manera de hacerlo con JavaScript nativo, pero en entorno Angular. No lo recomiendo porque hace que el código sea más complicado, pero a veces no hay otra opción.

Ver también Angular 2 – estilo HTML interno

En angular2@2.0.0-alpha.44:

Html-Binding no funcionará cuando se usa una {{interpolation}} , use una “Expresión” en su lugar:

inválido

 

-> arroja un error (interpolación en lugar de expresión esperada)

correcto

 

-> esta es la forma correcta.

Puede agregar elementos adicionales a la expresión, como:

 

>

insinuación

El HTML agregado usando [innerHTML] (o agregado dinámicamente por otros medios como element.appenChild() o similar) no será procesado por Angular de ninguna manera, excepto sanitización por seguridad.
Tales cosas solo funcionan cuando el HTML se agrega estáticamente a una plantilla de componentes. Si necesita esto, puede crear un componente en tiempo de ejecución como se explica en ¿Cómo puedo usar / crear una plantilla dinámica para comstackr componente dynamic con Angular 2.0?

Esto funciona para mí:

(Angular2, Alpha 33)

Según otro SO: Insertar HTML del servidor en DOM con angular2 (manipulación DOM general en Angular2) , “inner-html” es equivalente a “ng-bind-html” en Angular 1.X

El uso de [innerHTML] directamente sin utilizar el sanitizer DOM de Angular no es una opción si contiene contenido creado por el usuario. El tubo safeHtml sugerido por @ GünterZöchbauer en su respuesta es una forma de desinfectar el contenido. La siguiente directiva es otra:

 import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext, SimpleChanges } from '@angular/core'; // Sets the element's innerHTML to a sanitized version of [safeHtml] @Directive({ selector: '[safeHtml]' }) export class HtmlDirective implements OnChanges { @Input() safeHtml: string; constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {} ngOnChanges(changes: SimpleChanges): any { if ('safeHtml' in changes) { this.elementRef.nativeElement.innerHTML = this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml); } } } 

Para ser utilizado

 

Solo para obtener una respuesta completa, si su contenido html está en una variable de componente, también puede usar:

 

Me disculpo si me falta el punto aquí, pero me gustaría recomendar un enfoque diferente:

Creo que es mejor devolver los datos brutos de su aplicación del lado del servidor y vincularlos a una plantilla en el lado del cliente. Esto hace que las solicitudes sean más ágiles ya que solo está devolviendo json desde su servidor.

Para mí, no parece que tenga sentido usar Angular si todo lo que estás haciendo es ir a buscar html desde el servidor e inyectarlo “tal cual” en el DOM.

Sé que Angular 1.x tiene un enlace html, pero aún no he visto una contraparte en Angular 2.0. Sin embargo, podrían agregarlo más tarde. De todos modos, aún consideraría una API de datos para su aplicación Angular 2.0.

Aquí tengo algunos ejemplos con algunos enlaces de datos simples si está interesado: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

Simplemente use el atributo [innerHTML] en su HTML , algo como esto a continuación:

 

¿Alguna vez ha tenido propiedades en su componente que contengan algunas marcas de HTML o entidades que necesita mostrar en su plantilla? La interpolación tradicional no funcionará, pero el enlace de propiedad innerHTML viene al rescate.

¡Usar {{myVal}} NO funciona como se esperaba! Esto no recogerá las tags HTML como

, etc. y lo pasará solo como cadenas …

Imagine que tiene este código en su componente:

const myVal:string ='Stackoverflow is helpful!'

Si usa {{myVal}} , obtendrá esto en la vista:

 Stackoverflow is helpful! 

pero usar [innerHTML]="myVal" hace que el resultado sea el esperado así:

¡Stackoverflow es útil!

Trabajando en AngularJS v2.1.1

 

La forma de agregar elementos dinámicamente a DOM, como se explica en Angular 2 doc, es mediante el uso de la clase ViewContainerRef desde @ Angular / core.

Lo que tienes que hacer es declarar una directiva que implementará ViewContainerRef y actuará como un marcador de posición en tu DOM.

Directiva

 import { Directive, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[appInject]' }) export class InjectDirective { constructor(public viewContainerRef: ViewContainerRef) { } } 

Luego, en la plantilla donde desea inyectar el componente:

HTML

 

Luego, desde el código del componente inyectado, inyectará el componente que contiene el HTML que desea:

 import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core'; import { InjectDirective } from '../inject.directive'; import { InjectedComponent } from '../injected/injected.component'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent implements OnInit { @ViewChild(InjectDirective) injectComp: InjectDirective; constructor(private _componentFactoryResolver: ComponentFactoryResolver) { } ngOnInit() { } public addComp() { const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent); const viewContainerRef = this.injectComp.viewContainerRef; const componentRef = viewContainerRef.createComponent(componentFactory); } public removeComp() { const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent); const viewContainerRef = this.injectComp.viewContainerRef; const componentRef = viewContainerRef.remove(); } } 

Agregué una aplicación de demostración totalmente operativa en Angular 2, agregué dinámicamente el componente a la demo DOM.

Si tiene plantillas en su aplicación angular (o en cualquier marco) y devuelve plantillas HTML desde su back-end a través de una solicitud / respuesta HTTP, está mezclando plantillas entre el frontend y el back-end.

¿Por qué no dejar las plantillas en la interfaz (lo sugeriría), o en el back-end (bastante ime intransparente)?

Y si mantiene plantillas en la interfaz, ¿por qué no simplemente responde con JSON para las solicitudes al servidor? Ni siquiera tiene que implementar una estructura RESTful, pero mantener las plantillas en un lado hace que su código sea más transparente.

Esto pagará cuando alguien más tenga que lidiar con su código (o incluso usted mismo está reingresando a su propio código después de un tiempo).

Si lo haces bien, tendrás pequeños componentes con pequeñas plantillas, y lo mejor de todo, si tu código es imba, ¡alguien que no conozca los idiomas de encoding podrá entender tus plantillas y tu lógica! Así que, además, mantén tus funciones / métodos lo más pequeños que puedas. Eventualmente descubrirá que mantener, refactorizar, revisar y agregar características será mucho más fácil en comparación con las funciones / métodos / clases grandes y mezclar las plantillas y la lógica entre el frontend y el back-end, y mantener la mayor parte de la lógica en el back-end. si su frontend necesita ser más flexible (por ejemplo, escribir un frontend de Android o cambiar a un marco de interfaz diferente).

Filosofía, hombre 🙂

ps: no tiene que implementar el código 100% limpio, porque es muy caro, especialmente si tiene que motivar a los miembros del equipo;) pero: debe encontrar un buen equilibrio entre un enfoque del código más limpio y lo que tiene (tal vez ya está bastante limpio)

revisa el libro si puedes y deja que entre en tu alma: https://de.wikipedia.org/wiki/Clean_Code

En Angular 2 puedes hacer 3 tipos de enlaces:

  • [property]="expression" -> Cualquier propiedad html puede vincular a un
    expresión. En este caso, si la expresión cambia la propiedad se actualizará, pero esto no funciona de la otra manera.
  • (event)="expression" -> Cuando el evento activa la expresión de ejecución.
  • [(ngModel)]="property" -> Vincula la propiedad de js (o ts) a html. Cualquier actualización de esta propiedad se notará en todas partes.

Una expresión puede ser un valor, un atributo o un método. Por ejemplo: ‘4’, ‘controller.var’, ‘getValue ()’

Ejemplo aquí

El siguiente código te ayudará

myval puede reemplazar con el html deseado

 

prueba este código

su cadena con la etiqueta html como a continuación

 htmlString:string = "Hello
Html"

puedes obtener la cadena en la página html