Ligação HTML angular

Estou escrevendo um aplicativo Angular e tenho uma resposta HTML que quero exibir.

Como faço isso? Se eu simplesmente usar a sintaxe de ligação, {{myVal}}ele codifica todos os caracteres HTML (é claro).

Eu preciso de alguma forma vincular o innerHTMLde diva ao valor da variável.

A sintaxe correta é a seguinte:

<div [innerHTML]="theHtmlString"></div>

Referência da documentação

Angular 2.0.0 e Angular 4.0.0 final

Para conteúdo seguro apenas

<div [innerHTML]="myVal"></div>

DOMSanitizer

O HTML não seguro em potencial precisa ser explicitamente marcado como confiável usando o Sanitizer DOM da Angulars, para não remover partes do conteúdo potencialmente inseguras

<div [innerHTML]="myVal | safeHtml"></div>

com um cano 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
  }
}

Veja também No RC.1, alguns estilos não podem ser adicionados usando a sintaxe de ligação

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

Aviso de segurança

Confiar no HTML adicionado pelo usuário pode representar um risco à segurança. Os documentos mencionados anteriormente afirmam:

A chamada de qualquer uma das bypassSecurityTrust...APIs desativa a higienização interna da Angular para o valor passado. Verifique e audite cuidadosamente todos os valores e caminhos de código que entram nessa chamada. Verifique se todos os dados do usuário foram escapados adequadamente para este contexto de segurança. Para mais detalhes, consulte o Guia de Segurança .

Marcação angular

Algo como

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

com

<div [innerHTML]="foo"></div>

não fará com que o Angular processe nada específico do Angularfoo . Angular substitui a marcação específica angular no tempo de compilação pelo código gerado. A marcação adicionada no tempo de execução não será processada pelo Angular .

Para adicionar HTML que contenha marcação específica angular (associação de propriedade ou valor, componentes, diretivas, pipes, ...), é necessário adicionar o módulo dinâmico e compilar componentes em tempo de execução. Esta resposta fornece mais detalhes Como posso usar / criar um modelo dinâmico para compilar o componente dinâmico com o Angular 2.0?

[innerHtml] é uma ótima opção na maioria dos casos, mas falha com cadeias realmente grandes ou quando você precisa de um estilo codificado em html.

Eu gostaria de compartilhar outra abordagem:

Tudo o que você precisa fazer é criar uma div no seu arquivo html e fornecer um ID:

<div #dataContainer></div>

Em seguida, no seu componente Angular 2, crie referência a este objeto (TypeScript aqui):

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

Em seguida, basta usar a loadDatafunção para acrescentar algum texto ao elemento html.

É apenas uma maneira de fazer isso usando javascript nativo, mas em ambiente Angular. Eu não recomendo, porque torna o código mais confuso, mas às vezes não há outra opção.

Veja também Angular 2 - estilo innerHTML

Em [email protected]:

Html-Binding não funcionará ao usar um {{interpolation}}, use uma "Expressão":

inválido

<p [innerHTML]="{{item.anleser}}"></p>

-> gera um erro (interpolação em vez da expressão esperada)

corrigir

<p [innerHTML]="item.anleser"></p>

-> esta é a maneira correta.

você pode adicionar elementos adicionais à expressão, como:

<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>

dica

O HTML adicionado usando [innerHTML](ou adicionado dinamicamente por outros meios semelhantes element.appenChild()ou similares) não será processado pela Angular de forma alguma, exceto pela higienização por segurança.
Essas coisas funcionam apenas quando o HTML é adicionado estaticamente a um modelo de componentes. Se você precisar disso, poderá criar um componente em tempo de execução, como explicado em Como posso usar / criar um modelo dinâmico para compilar o Componente dinâmico com o Angular 2.0?

Usar o [innerHTML] diretamente sem usar o desinfetante DOM da Angular não é uma opção se ele contiver conteúdo criado pelo usuário. O canal safeHtml sugerido por @ GünterZöchbauer em sua resposta é uma maneira de higienizar o conteúdo. A seguinte diretiva é outra:

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

Ser usado

<div [safeHtml]="myVal"></div>

Consulte outras respostas mais atualizadas.

Isso funciona para mim: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

De acordo com outro SO: Inserir HTML do servidor no DOM com angular2 (manipulação geral do DOM no Angular2) , "html interno" é equivalente a "ng-bind-html" no Angular 1.X

Apenas para obter uma resposta completa, se o seu conteúdo html estiver em uma variável de componente, você também poderá usar:

<div [innerHTML]=componementVariableThatHasTheHtml></div>

Peço desculpas se estou perdendo o ponto aqui, mas gostaria de recomendar uma abordagem diferente:

Eu acho que é melhor retornar dados brutos do aplicativo do servidor e vinculá-los a um modelo no lado do cliente. Isso gera solicitações mais ágeis, pois você está retornando apenas o json do seu servidor.

Para mim, não parece fazer sentido usar o Angular se tudo o que você está fazendo é buscar html no servidor e injetá-lo "como está" no DOM.

Eu sei que o Angular 1.x tem uma ligação html, mas ainda não vi uma contraparte no Angular 2.0. Eles podem adicioná-lo mais tarde. De qualquer forma, eu ainda consideraria uma API de dados para o seu aplicativo Angular 2.0.

Eu tenho algumas amostras aqui com alguma ligação de dados simples, se você estiver interessado: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

A resposta curta já foi fornecida aqui: use <div [innerHTML]="yourHtml">binding.

No entanto, o restante dos conselhos mencionados aqui pode ser enganoso. O Angular possui um mecanismo de desinfecção incorporado quando você vincula a propriedades como essa. Como o Angular não é uma biblioteca de desinfecção dedicada, é muito zeloso em relação a conteúdo suspeito não correr riscos. Por exemplo, ele limpa todo o conteúdo SVG em uma sequência vazia.

Você pode ouvir conselhos para "limpar" seu conteúdo usando DomSanitizerpara marcar o conteúdo como seguro nos bypassSecurityTrustXXXmétodos. Também existem sugestões para usar pipe para fazer isso, e esse pipe é frequentemente chamado safeHtml.

Tudo isso é enganoso, porque na verdade ignora a higienização , não a higienização do seu conteúdo. Isso pode ser uma preocupação de segurança, porque se você fizer isso no conteúdo fornecido pelo usuário ou em qualquer coisa que não tenha certeza - você se abrirá para ataques de código malicioso.

Se o Angular remover algo que você precisa com a higienização interna - o que você pode fazer em vez de desabilitar é delegar a higienização real a uma biblioteca dedicada que seja boa nessa tarefa. Por exemplo - DOMPurify.

Eu criei uma biblioteca de wrapper para ele, para que pudesse ser facilmente usada com Angular: https://github.com/TinkoffCreditSystems/ng-dompurify

Ele também possui um canal para higienizar declarativamente o HTML:

<div [innerHtml]="value | dompurify"></div>

A diferença para os pipes sugeridos aqui é que ele realmente faz a higienização por meio do DOMPurify e, portanto, funciona para o SVG.

Uma coisa a ter em mente é que o DOMPurify é ótimo para higienizar HTML / SVG, mas não CSS. Assim, você pode fornecer o desinfetante CSS da Angular para lidar com CSS:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

É um ɵprefixo interno - hense , mas é assim que a equipe do Angular o usa em seus próprios pacotes também. Essa biblioteca também funciona para o Angular Universal e para o ambiente de renomeação do lado do servidor.

Basta usar o [innerHTML]atributo no seu HTML , algo como isto abaixo:

<div [innerHTML]="myVal"></div>

Já teve propriedades em seu componente que contêm algumas marcações ou entidades html que você precisa exibir no seu modelo? A interpolação tradicional não funcionará, mas a ligação da propriedade innerHTML vem ao resgate.

Usar {{myVal}} NÃO funciona como esperado! Isso não pega as tags HTML como etc <p>, <strong>e as transmite apenas como strings ...

Imagine que você tenha este código em seu componente:

const myVal:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>'

Se você usar {{myVal}}, você verá isso na exibição:

<strong>Stackoverflow</strong> is <em>helpful!</em>

mas usar [innerHTML]="myVal"cria o resultado conforme o esperado da seguinte maneira:

Stackoverflow é útil!

Você pode aplicar vários canais para estilo, link e HTML da seguinte maneira em .html

<div [innerHTML]="announcementContent | safeUrl| safeHtml">
                    </div>

e no tubo .ts para desinfetante de 'URL'

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

canal para desinfetante 'HTML'

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

isso será aplicado sem perturbar nenhum evento de estilo e clique no link

 <div [innerHTML]="HtmlPrint"></div><br>

O innerHtml é uma propriedade dos elementos HTML, que permite definir seu conteúdo html programaticamente. Há também uma propriedade innerText que define o conteúdo como texto sem formatação.

O [attributeName]="value"colchete da caixa, ao redor do atributo define uma ligação de entrada Angular. Isso significa que o valor da propriedade (no seu caso innerHtml) está vinculado à expressão especificada. Quando o resultado da expressão é alterado, o valor da propriedade também é alterado.

Então, basicamente, [innerHtml]você pode vincular e alterar dinamicamente o conteúdo html do elemento HTML fornecido.

No Angular 2, você pode fazer três tipos de ligações:

• [property]="expression"-> Qualquer propriedade html pode vincular a uma
  expressão. Nesse caso, se a expressão mudar de propriedade, a atualização será atualizada, mas isso não funcionará da outra maneira.
• (event)="expression" -> Quando o evento é ativado, execute a expressão.
• [(ngModel)]="property"-> Vincula a propriedade de js (ou ts) ao html. Qualquer atualização nesta propriedade será perceptível em todos os lugares.

Uma expressão pode ser um valor, um atributo ou um método. Por exemplo: '4', 'controller.var', 'getValue ()'

Exemplo aqui

A maneira de adicionar elementos dinamicamente ao DOM, conforme explicado no documento do Angular 2, é usando a classe ViewContainerRef de @ Angular / core.

O que você precisa fazer é declarar uma diretiva que implementará o ViewContainerRef e aja como um espaço reservado no seu DOM.

Directiva

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Em seguida, no modelo em que você deseja injetar o componente:

HTML

<div class="where_you_want_to_inject">    
  <ng-template appInject></ng-template>
</div>

Em seguida, no código do componente injetado, você injetará o componente que contém o HTML que deseja:

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();
  }

}

Adicionei um aplicativo de demonstração totalmente funcional no Angular 2 para adicionar dinamicamente o componente à demonstração do DOM

Você pode usar várias abordagens para alcançar a solução. Como já foi dito na resposta aprovada, você pode usar:

<div [innerHTML]="myVal"></div>

dependendo do que você está tentando alcançar, também pode tentar outras coisas, como javascript DOM (não recomendado, operações DOM são lentas):

Apresentação

<div id="test"></test>

Componente

var p = document.getElementsById("test");
p.outerHTML = myVal;

Vinculação de Propriedade

Javascript DOM HTML externo

Sempre podemos transmitir conteúdo html à innerHTMLpropriedade para renderizar conteúdo dinâmico html, mas esse conteúdo html dinâmico também pode ser infectado ou malicioso. Portanto, antes de transmitir conteúdo dinâmico innerHTML, devemos sempre garantir que o conteúdo seja higienizado (usando DOMSanitizer) para que possamos escapar de todo o conteúdo malicioso.

Tente abaixo do pipe:

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {
    }
    transform(value: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Usage:
<div [innerHTML]="content | safeHtml"></div>

Se você deseja isso no Angular 2 ou no Angular 4 e também deseja manter o CSS embutido, pode usar

<div [innerHTML]="theHtmlString | keepHtml"></div>

Você também pode vincular as propriedades da classe de componente angular ao modelo usando a forma canônica como abaixo:

<div bind-innerHTML="theHtmlString"></div>

Documentação angular: https://angular.io/guide/template-syntax#property-binding-property

Veja o exemplo de stackblitz em funcionamento aqui

Trabalhando no Angular v2.1.1

<div [innerHTML]="variable or htmlString">
</div>

Se você possui modelos em seu aplicativo angular (ou qualquer estrutura) e retorna modelos HTML do seu back-end por meio de uma solicitação / resposta HTTP, você está misturando modelos entre o front-end e o back-end.

Por que não deixar o material de modelo no front-end (eu sugeriria isso) ou no back-end (imo bastante intransparente)?

E se você mantiver modelos no front-end, por que não responder com JSON para solicitações ao back-end? Você nem precisa implementar uma estrutura RESTful, mas manter os modelos de um lado torna seu código mais transparente.

Isso será recompensado quando outra pessoa tiver que lidar com seu código (ou até você mesmo estará inserindo seu próprio código depois de um tempo)!

Se você fizer isso corretamente, terá pequenos componentes com modelos pequenos e, o melhor de tudo, se seu código for imba, alguém que não conheça linguagens de codificação poderá entender seus modelos e sua lógica! Além disso, mantenha suas funções / métodos o menor possível. Você acabará descobrindo que manter, refatorar, revisar e adicionar recursos será muito mais fácil comparado a grandes funções / métodos / classes e misturar modelos e lógica entre o front-end e o back-end - e manter o máximo da lógica no back-end. se o seu front-end precisar ser mais flexível (por exemplo, escrevendo um front-end android ou alternando para uma estrutura de front-end diferente).

Filosofia, cara :)

ps: você não precisa implementar código 100% limpo, porque é muito caro - especialmente se você tiver que motivar os membros da equipe;) mas: você deve encontrar um bom equilíbrio entre uma abordagem do código mais limpo e o que você tem (talvez já está bem limpo)

verifique o livro, se puder, e deixe-o entrar em sua alma: https://de.wikipedia.org/wiki/Clean_Code