Associazione HTML angular

Sto scrivendo un’applicazione Angular e ho una risposta HTML che voglio mostrare.

Come lo faccio? Se uso semplicemente la syntax del binding {{myVal}} codifica tutti HTML caratteri HTML (ovviamente).

Ho bisogno in qualche modo di bind l’html interno di un div al valore della variabile.

La syntax corretta è ora la seguente:

 

Lavorare in 6.1.3

Documentazione di riferimento

Angular 2.0.0 e Angular 4.0.0 final

Per contenuti sicuri, basta

 

DOMSanitizer

Il potenziale codice HTML non sicuro deve essere contrassegnato in modo esplicito come attendibile utilizzando il disinfettante DOM di Angulars, in modo da non escludere parti potenzialmente pericolose del contenuto

 

con un tubo simile

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

Vedi anche in RC.1 alcuni stili non possono essere aggiunti usando la syntax del binding

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

Avviso di sicurezza

Affidare l’HTML aggiunto dall’utente può rappresentare un rischio per la sicurezza. I documenti precedenti menzionati :

Chiamando una delle bypassSecurityTrust... API disabilitano la disinfezione integrata di Angular per il valore passato. Controlla attentamente e verifica tutti i valori e i percorsi di codice che entrano in questa chiamata. Assicurati che tutti i dati utente siano opportunamente sfuggiti per questo contesto di sicurezza. Per ulteriori dettagli, consultare la Guida alla sicurezza .

Markup angular

Qualcosa di simile a

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

con

 

non farà in modo che Angular elabori qualcosa di specifico angular in foo . Angolare sostituisce il markup angular specifico al momento della compilazione con il codice generato. Il markup aggiunto al runtime non verrà elaborato da Angular .

Per aggiungere l’HTML che contiene markup angular-specifico (binding di proprietà o valore, componenti, direttive, pipe, …) è necessario aggiungere il modulo dinamico e compilare componenti in fase di runtime. Questa risposta fornisce maggiori dettagli Come posso usare / creare template dinamico per compilare componenti dinamici con Angular 2.0?

[innerHtml] è una buona opzione nella maggior parte dei casi, ma fallisce con stringhe molto grandi o quando hai bisogno di uno stile hard-coded in html.

Mi piacerebbe condividere un altro approccio:

Tutto quello che devi fare è creare un div nel tuo file html e dargli un id:

 

Quindi, nel tuo componente Angular 2, crea un riferimento a questo object (TypeScript qui):

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

Quindi usa semplicemente la funzione loadData per aggiungere del testo all’elemento html.

È solo un modo per farlo usando il javascript nativo, ma in ambiente Angolare. Non lo consiglio, perché rende il codice più disordinato, ma a volte non c’è altra opzione.

Vedi anche Angolare 2 – innerHTML styling

Su [email protected]:

Html-Binding non funzionerà quando si usa un {{interpolation}} , usare invece una “Expression”:

non valido

 

-> genera un errore (interpolazione anziché espressione prevista)

corretta

 

-> questo è il modo corretto.

puoi aggiungere ulteriori elementi all’espressione, come:

 

>

suggerimento

L’HTML aggiunto usando [innerHTML] (o aggiunto dynamicmente con altri mezzi come element.appenChild() o simile) non verrà elaborato da Angular in alcun modo eccetto la disinfezione per scopi di sicurezza.
Tali cose funzionano solo quando l’HTML viene aggiunto staticamente a un modello di componenti. Se ti serve, puoi creare un componente in fase di runtime come spiegato in Come posso usare / creare template dinamici per compilare componenti dinamici con Angular 2.0?

Questo funziona per me:

(Angular2, Alpha 33)

Secondo un altro SO: Inserimento di HTML dal server in DOM con angular2 (manipolazione DOM generica in Angular2) , “inner-html” è equivalente a “ng-bind-html” in Angular 1.X

L’utilizzo di [innerHTML] direttamente senza utilizzare il disinfettante DOM di Angular non è un’opzione se contiene contenuti creati dall’utente. La pipa safeHtml suggerita da @ GünterZöchbauer nella sua risposta è un modo per disinfettare il contenuto. La seguente direttiva è un’altra:

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

Da essere usato

 

Per ottenere una risposta completa, se il contenuto html si trova in una variabile componente, puoi anche utilizzare:

 

Mi scuso se mi manca il punto qui, ma mi piacerebbe raccomandare un approccio diverso:

Penso che sia meglio restituire i dati grezzi dall’applicazione lato server e associarli a un modello sul lato client. Questo rende più richieste agili dal momento che stai solo restituendo json dal tuo server.

Per me non sembra che abbia senso usare Angular se tutto quello che stai facendo è recuperare il codice html dal server e iniettarlo “così com’è” nel DOM.

So che Angular 1.x ha un binding html, ma non ho ancora visto una controparte in Angular 2.0. Potrebbero aggiungerlo più tardi però. Ad ogni modo, considererei ancora una API di dati per la tua app Angular 2.0.

Ho alcuni esempi qui con alcuni semplici dati vincolanti se sei interessato: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

Basta semplicemente usare l’attributo [innerHTML] nel tuo codice HTML , qualcosa di simile sotto:

 

Hai mai avuto proprietà nel tuo componente che contengono markup html o quadro che devi mostrare nel tuo template? L’interpolazione tradizionale non funzionerà, ma il legame della proprietà innerHTML viene in soccorso.

L’utilizzo di {{myVal}} NON funziona come previsto! Questo non raccoglierà i tag HTML come

, etc e lo passerà solo come stringhe …

Immagina di avere questo codice nel tuo componente:

const myVal:string ='Stackoverflow is helpful!'

Se usi {{myVal}} , otterrai questo nella vista:

 Stackoverflow is helpful! 

ma usando [innerHTML]="myVal" rende il risultato come previsto in questo modo:

Stackoverflow è utile!

Lavorare in AngularJS v2.1.1

 

Il modo per aggiungere dynamicmente elementi al DOM, come spiegato in Angular 2 doc, consiste nell’utilizzare la class ViewContainerRef da @ Angular / core.

Quello che devi fare è dichiarare una direttiva che implementerà ViewContainerRef e agire come un segnaposto sul tuo DOM.

Direttiva

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

Quindi, nel modello in cui si desidera iniettare il componente:

HTML

 

Quindi, dal codice del componente iniettato, inietterai il componente contenente l’HTML che desideri:

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

Ho aggiunto un’applicazione demo completamente funzionante su Angular 2 per aggiungere dynamicmente un componente alla demo DOM

Se si dispone di modelli nell’applicazione angular (o qualsiasi framework) e si restituiscono modelli HTML dal back-end tramite una richiesta / risposta HTTP, si confondono i modelli tra il frontend e il backend.

Perché non lasciare il materiale dei template sia nel frontend (lo suggerirei), sia nel backend (piuttosto intrasparente)?

E se mantieni i modelli nel frontend, perché non rispondere semplicemente con JSON per le richieste al back-end. Non è nemmeno necessario implementare una struttura RESTful, ma mantenere i modelli su un lato rende il codice più trasparente.

Ciò si ripaga quando qualcun altro deve far fronte al tuo codice (o anche tu stesso stai reinserendo il tuo codice dopo un po ‘)!

Se lo fai bene, avrai piccoli componenti con piccoli modelli e, soprattutto, se il tuo codice è imba, qualcuno che non conosce le lingue di codifica sarà in grado di capire i tuoi modelli e la tua logica! Quindi, inoltre, mantieni le tue funzioni / metodi il più piccolo ansible. Alla fine scoprirai che il mantenimento, il refactoring, la revisione e l’aggiunta di funzionalità saranno molto più semplici rispetto a funzioni / metodi / classi di grandi dimensioni e mischiando i modelli e la logica tra frontend e backend – e manterrai la maggior parte della logica nel back-end se il frontend deve essere più flessibile (ad esempio scrivere un frontend per Android o passare a un diverso frontend framework).

Filosofia, uomo 🙂

ps: non devi implementare codice pulito al 100%, perché è molto costoso, specialmente se devi motivare i membri del team;) ma: dovresti trovare un buon equilibrio tra un approccio al codice più pulito e quello che hai (forse è già abbastanza pulito)

controlla il libro se puoi e lascialo entrare nella tua anima: https://de.wikipedia.org/wiki/Clean_Code

In Angular 2 puoi fare 3 tipi di attacchi:

  • [property]="expression" -> Qualsiasi proprietà html può essere collegata a un
    espressione. In questo caso, se l’espressione cambia la proprietà si aggiornerà, ma questo non funziona nell’altro modo.
  • (event)="expression" -> Quando l’evento si triggers esegue l’espressione.
  • [(ngModel)]="property" -> Lega la proprietà da js (o ts) a html. Qualsiasi aggiornamento su questa proprietà sarà visibile ovunque.

Un’espressione può essere un valore, un attributo o un metodo. Ad esempio: ‘4’, ‘controller.var’, ‘getValue ()’

Esempio qui

Il seguente codice ti aiuterà

myval puoi sostituirlo con l’html desiderato

 

prova questo codice

la tua stringa con tag html come sotto

 htmlString:string = "Hello
Html"

puoi ottenere la stringa nella pagina html