custom - ¿Cómo permitir html a cambio de angular2 pipe?

ngfor order by angular 4

Question

Tengo una canalización que devuelve una cadena html, sin embargo, las salidas de la cadena se escaparon presumiblemente como un valor predeterminado para la seguridad. Estoy seguro de que debe haber una opción para permitir html en su lugar, pero no puedo encontrarlo cuando busco documentos.

¿Cómo puedo indicar a la canalización que permita que se genere el html real?

Answer 1

Así que gracias por las respuestas.

El uso del enlace de externalHTML sugerido por @alexpods funcionó de maravilla. No necesito cambiar mi pipa en absoluto.

Así que lo que estaba haciendo antes:

{{''TEXT'' | hn: ''h2.whatever''}} {{''TEXT'' | hn: ''h2.whatever''}} que resultó en el html correcto pero escapó, es decir.

<h2 class="whatever">TEXT</h2>

Funciona muy bien como: <span [outerHTML]="''TEXT'' | hn:''h2.whatever''"></span>

que genera: <h2 class="whatever">TEXT</h2>

Answer 2

No sé si eso es posible con una tubería. (Es, ver la respuesta de @ alexpods.)

¿Ha considerado convertir su tubería en un componente con una propiedad de entrada? Es decir, lo que sea que alimente su tubería, haga de eso una propiedad de entrada del componente. Coloca el HTML que genera el pipe en la plantilla del componente.

Answer 3

Utilice enlaces a innerHTML o outerHTML para representar html ya escapado. Por ejemplo, <span [innerHTML]="someString | toHtmlPipe"></span> . Ver este plunk :

@Pipe({
  name: ''wrapBold''
})
class WrapBold {
  transform(content) {
    return `<b>${content}</b>`;
  }
}

@Component({
  selector: ''my-app'',
  pipes: [WrapBold],
  template: `
    <div>
      Hello <span [outerHTML]="content | wrapBold"></span>
    </div>
  `
})
export class App {
  constructor() {
    this.content = ''Angular2''
  }
}