Legătura HTML Angular (Programare, Angular, Șablon Angular2, Angular2 Databinding)

Aviad P. a intrebat.

Scriu o aplicație Angular și am un răspuns HTML pe care vreau să îl afișez.

Cum pot să fac asta? Dacă folosesc pur și simplu sintaxa de legare {{myVal}} aceasta codifică toate caracterele HTML (bineînțeles).

Am nevoie să leg cumva să leg innerHTML a unui div la valoarea variabilei.

Comentarii

  • Postare conexă pentru a obține CSS definit într-o componentă pentru a funcționa corect în legarea HTML stackoverflow.com/questions/36265026/… –  > Por y3sh.
23 răspunsuri
prolink007

Sintaxa corectă este următoarea:

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

Documentație de referință

Comentarii

    18

  • Există vreo modalitate prin care pot forța angular să își execute legătura pe elementele din acel innerHTML? Am nevoie să folosesc un <a [router-link]=”…”></a> și vreau să furnizez acest lucru din html extern. –  > Por thouliha.
  • @thouliha Ți-aș recomanda să începi un nou mesaj referitor la întrebarea ta. –  > Por prolink007.
  • În cazul meu, redă șirul de caractere, dar face ceva cu markup-ul. Se pare că a dezbrăcat atributele de pe markup . Sunt la versiunea 2.4.6.  > Por crthompson.
  • @thouliha ai găsit vreodată un răspuns? există vreo modalitate de a forța angular să reevalueze legăturile după injectare? toate legăturile și șabloanele mele sunt rupte în cadrul porțiunii innerHtml –  > Por jgritten.
  • Celelalte răspunsuri stackoverflow.com/a/41089093/1225421 și stackoverflow.com/a/41121006/1225421 rezolvă problema de securitate HTML sanitzer. –  > Por Alex Pandrea.
Günter Zöchbauer

Angular 2.0.0 și Angular 4.0.0.0 final

Pentru un conținut sigur doar

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

DOMSanitizer

HTML potențial nesigur trebuie să fie marcat în mod explicit ca fiind de încredere folosind Angulars DOM sanitizer, astfel încât să nu elimine părțile potențial nesigure ale conținutului

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

cu o țeavă ca

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

A se vedea și În RC.1, unele stiluri nu pot fi adăugate folosind sintaxa de legare

Și documente: https://angular.io/api/platform-browser/DomSanitizer

Avertisment de securitate

Încrederea în HTML adăugat de utilizator poate reprezenta un risc de securitate. În cazul în care se utilizează menționat anterior declară:

Apelarea oricăreia dintre funcțiile bypassSecurityTrust... API-uri dezactivează purificarea încorporată de Angular pentru valoarea transmisă. Verificați și auditați cu atenție toate valorile și căile de cod care intră în acest apel. Asigurați-vă că orice date ale utilizatorului sunt scăpate în mod corespunzător pentru acest context de securitate. Pentru mai multe detalii, consultați secțiunea Ghidul de securitate.

Marcajul Angular

Ceva de genul

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

cu

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

nu va face ca Angular să proceseze nimic specific Angular în foo.Angular înlocuiește marcajul specific Angular în momentul construirii cu codul generat. Marcaje adăugate în timpul execuției nu va fi procesată de Angular.

Pentru a adăuga HTML care conține marcaje specifice Angular (legare de proprietăți sau valori, componente, directive, pipe, …) este necesar să se adauge modulul dinamic și să se compileze componentele în timpul execuției. acest răspuns oferă mai multe detalii Cum pot folosi/crea un șablon dinamic pentru a compila Componente dinamice cu Angular 2.0?

Comentarii

    16

  • Acesta ar trebui să fie răspunsul. Fiți atenți la cele două linii care sunt comentate. De fapt, a doua este cea care se ocupă de HTML. –  > Por crthompson.
  • asigurați-vă că import { BrowserModule, DomSanitizer } from '@angular/platform-browser' –  > Por crthompson.
  • De asemenea, import { Pipe } from '@angular/core' –  > Por Appulus.
  • Utilizați DomSanitizer în loc de –  > Por Günter Zöchbauer.
  • Acest răspuns rezolvă problemele generate de HTML considerat nesigur. Am reușit să definesc culoarea textului și să adaug un youtube iframe cu acesta. Nu puteți obține acest lucru prin simpla setare a innerHTML, așa cum este descris în celelalte răspunsuri. –  > Por Alex Pandrea.
Piotrek

[innerHtml] este o opțiune grozavă în majoritatea cazurilor, dar eșuează în cazul șirurilor foarte mari sau atunci când aveți nevoie de stilizare hard-coded în html.

Aș dori să împărtășesc o altă abordare:

Tot ce trebuie să faceți este să creați un div în fișierul dvs. html și să îi dați un id:

<div #dataContainer></div>

Apoi, în componenta dvs. Angular 2, creați o referință la acest obiect (TypeScript aici):

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

Apoi, pur și simplu folosiți loadData pentru a adăuga un text la elementul html.

Este doar un mod în care ați face-o folosind javascript nativ, dar în mediul Angular. Nu recomand acest lucru, pentru că face codul mai dezordonat, dar uneori nu există altă opțiune.

Consultați și Angular 2 – stilizare innerHTML

Comentarii

  • Alte soluții salvează mai întâi șirul în atributul html, apoi încarcă html. Salvarea unui șir mare de caractere în atribut cauzează blocarea browserului sau chiar blocarea acestuia. Soluția mea omite această „parte de atribut” –  > Por Piotrek.
  • Da, altfel nu aș fi adăugat răspunsul meu aici –  > Por Piotrek.
  • 28

  • [innerHtml] elimină stylingul codificat în Html. Pentru a integra un editor wysiwyg, a trebuit să folosesc abordarea listată aici. –  > Por Jony Adamit.
  • Acest lucru este util pentru generarea de conținut care va merge într-un e-mail HTML, unde, din păcate, stilizarea în linie este încă necesară. Alte metode care folosesc interpolarea au eliminat stilurile inline. –  > Por Frank.
  • Poate acest lucru @ViewChild funcționa pentru mai multe div-uri? și dacă da, cum? –  > Por Guram.
jvoigt

Pe [email protected]:

Html-Binding nu va funcționa atunci când se utilizează un {{interpolation}}, , utilizați în schimb o „Expression”:

invalid

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

-> aruncă o eroare (Interpolare în loc de expresia așteptată)

corectați

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

-> acesta este modul corect.

puteți adăuga elemente suplimentare la expresie, cum ar fi:

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

hint

HTML adăugat folosind [innerHTML] (sau adăugat dinamic prin alte mijloace, cum ar fi element.appenChild() sau similar) nu va fi procesat de Angular în niciun fel, cu excepția salubrizării în scopuri de securitate.
Astfel de lucruri funcționează numai atunci când HTML-ul este adăugat static la un șablon de componente. Dacă aveți nevoie de acest lucru, puteți crea o componentă în timpul execuției, așa cum s-a explicat în Cum pot utiliza/crea un șablon dinamic pentru a compila Componente dinamice cu Angular 2.0?

Comentarii

  • Al treilea exemplu nu funcționează. Expresia nu este evaluată. Rezultatul este pur și simplu un șir de caractere… Orice altă modalitate de a combina trustedHTML cu alte elemente de etichete? –  > Por Kévin Vilela Pinto.
Rene Hamburger

Utilizarea directă a [innerHTML] fără a folosi DOM sanitizer-ul Angular nu este o opțiune dacă acesta conține conținut creat de utilizator. Țeava safeHtml sugerată de @GünterZöchbauer în răspunsul său este o modalitate de igienizare a conținutului. Următoarea directivă este o alta:

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

A se utiliza

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

Comentarii

  • @ObasiObenyOj se poate face în continuare acest lucru fără a folosi o directivă separată dacă este un caz limitat, constructor( private sanitizer: Sanitizer) {} și să legați rezultatul în ceea ce aveți nevoie, de asemenea, utilizarea ElementRef nu este recomandată. –  > Por Valex.
  • Funcționează cu elementele de intrare și cu elementele de tip text-area? –  > Por Dawid.
Fan Li

Vă rugăm să consultați alte răspunsuri care sunt mai actuale.

Pentru mine funcționează: <div innerHTML = "{{ myVal }}"></div> (Angular2, Alpha 33)

În conformitate cu un alt SO: Inserarea HTML de pe server în DOM cu angular2 (manipulare generală a DOM în Angular2), „inner-html” este echivalent cu „ng-bind-html” în Angular 1.X

Comentarii

  • Folosiți sintaxa de legare [property] în loc de {{interpolare}} -.  > Por superluminar.
  • de asemenea, funcționează în proiectul meu în care dont wont work <div [innerHTML] = „{{ myVal }}}”></div> –  > Por mbielecki1.
Serj Sagan

Doar pentru a face pentru un răspuns complet, dacă conținutul dvs. html este într-o variabilă de componentă, ați putea, de asemenea, să utilizați:

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

TGH

Îmi cer scuze dacă nu înțeleg ce vreau să spun aici, dar aș dori să vă recomand o abordare diferită:

Cred că este mai bine să returnați datele brute din aplicația dvs. de pe partea serverului și să le legați de un șablon pe partea clientului. Acest lucru face ca solicitările să fie mai agile, deoarece returnezi doar json de la serverul tău.

Mie nu mi se pare că are sens să folosești Angular dacă tot ceea ce faci este să aduci html de pe server și să-l injectezi „ca atare” în DOM.

Știu că Angular 1.x are un html binding, dar nu am văzut încă un corespondent în Angular 2.0. S-ar putea totuși să o adauge mai târziu. Oricum, eu aș lua în considerare în continuare o api de date pentru aplicația dvs. Angular 2.0.

Am câteva exemple aici cu câteva date simple de legare a datelor, dacă vă interesează: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

Comentarii

    30

  • Există cu siguranță cazuri de utilizare în care ați dori să preluați și să afișați html brut. De exemplu, preluarea unei bucăți de articol formatat de la distanță. –  > Por Alexander Chen.
  • Un alt scenariu adesea ignorat este protejarea logicii de afaceri din șablon, uneori nu doriți ca utilizatorii neautorizați să vadă logica pe care o utilizați pentru a afișa informații, astfel încât ați prefera să pregătiți vizualizarea pe partea serverului – -.  > Por Ayyash.
  • De asemenea, afișarea unui e-mail HTML, de exemplu – o observație/întrebare corectă totuși! –  > Por a darren.
  • Dacă nu înțelegi ideea (ceea ce se pare că nu înțelegi, după cum recunoști), atunci de ce să postezi un răspuns? Evident, scopul Angular este de a folosi motorul său de vizualizare pentru a lega și a reda datele. Dar, având în vedere faptul că există nenumărate aplicații în care ar putea fi folosită o aplicație Angular, este de fapt fezabil ca una sau două dintre ele să aibă cerința ca unele dintre datele care trebuie afișate în aplicație să fie deja formatate în HTML, și s-ar putea întâmpla ca dezvoltatorul să nu aibă control asupra acelui conținut. Cu alte cuvinte… întrebare relevantă. –  > Por Gregor.
waterplea

Răspunsul scurt a fost furnizat deja aici: utilizați <div [innerHTML]="yourHtml"> obligatoriu.

Cu toate acestea, restul sfaturilor menționate aici ar putea fi înșelătoare. Angular are un mecanism de igienizare încorporat atunci când vă legați la proprietăți de acest tip. Din moment ce Angular nu este o bibliotecă dedicată sanitizării, este prea zelos față de conținutul suspect pentru a nu-și asuma niciun risc. De exemplu, acesta purifică tot conținutul SVG în șiruri goale.

S-ar putea să auziți sfaturi pentru a vă „igieniza” conținutul utilizând DomSanitizer pentru a marca conținutul ca fiind sigur cu bypassSecurityTrustXXX metode. Există, de asemenea, sugestii de a utiliza pipe pentru a face acest lucru, iar pipe-ul respectiv este adesea numit safeHtml.

Toate acestea sunt înșelătoare, deoarece de fapt ocolește dezinfectarea, , nu igienizarea conținutului. Acest lucru ar putea fi o problemă de securitate, deoarece, dacă faceți vreodată acest lucru pe conținutul furnizat de utilizator sau pe ceva de care nu sunteți sigur – vă deschideți pentru atacuri cu coduri malițioase.

În cazul în care Angular elimină ceva de care aveți nevoie prin dezinfectarea sa încorporată – ceea ce puteți face în loc să o dezactivați este să delegați dezinfectarea efectivă la o bibliotecă dedicată care se pricepe la această sarcină. De exemplu – DOMPurify.

Am făcut o bibliotecă de înfășurare pentru aceasta, astfel încât să poată fi utilizată cu ușurință cu Angular:https://github.com/TinkoffCreditSystems/ng-dompurify

De asemenea, are o țeavă pentru a curăța declarativ HTML:

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

Diferența față de țevile sugerate aici este că, de fapt, face salubrizare prin DOMPurify și, prin urmare, funcționează pentru SVG.

Un lucru de reținut este că DOMPurify este excelent pentru curățarea HTML/SVG, dar nu și pentru CSS. Deci, puteți furniza CSS sanitizerul CSS al lui Angular pentru a se ocupa de CSS:

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

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

Este intern – de aceea ɵ prefix, dar oricum așa îl folosește echipa Angular și în propriile pachete. Această bibliotecă funcționează, de asemenea, pentru Angular Universal și pentru mediul renedring de partea serverului.

Alireza

Pur și simplu utilizați pur și simplu [innerHTML] în atributul HTML, , ceva de genul acesta de mai jos:

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

Ați avut vreodată proprietăți în componenta dvs. care conțin unele marcaje html sau entități pe care trebuie să le afișați în șablon? Interpolarea tradițională nu va funcționa, dar legarea proprietății innerHTML vine în ajutor.

Utilizarea {{myVal}} NU funcționează așa cum era de așteptat! Acest lucru nu va va prelua etichetele HTML precum <p>, , <strong> etc. și le va transmite doar ca șiruri de caractere…

Imaginați-vă că aveți acest cod în componenta dumneavoastră:

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

Dacă utilizați {{myVal}}, , veți obține acest lucru în vizualizare:

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

dar folosind [innerHTML]="myVal"face ca rezultatul să fie cel așteptat, astfel:

Stackoverflow este de ajutor!

Supriya

The innerHtml este o proprietate a elementelor HTML, care vă permite să setați conținutul său html în mod programatic. Există, de asemenea, o proprietate innerText care definește conținutul ca text simplu.

Proprietatea [attributeName]="value" box bracket , care înconjoară atributul definește o legătură de intrare Angular. Aceasta înseamnă că valoarea proprietății (în cazul dumneavoastră innerHtml) este legată de expresia dată, iar atunci când rezultatul expresiei se modifică, se modifică și valoarea proprietății.

Deci, în principiu [innerHtml] vă permite să legați și să modificați în mod dinamic conținutul html al elementului HTML dat.

adrisons

În Angular 2 puteți face 3 tipuri de legături:

  • [property]="expression" -> Orice proprietate html se poate lega la un element
    expresie. În acest caz, dacă expresia se schimbă, proprietatea se va actualiza, dar nu funcționează și în sens invers.
  • (event)="expression" -> Când evenimentul se activează, executați expresia.
  • [(ngModel)]="property" -> Leagă proprietatea din js (sau ts) la html. Orice actualizare a acestei proprietăți va fi vizibilă peste tot.

O expresie poate fi o valoare, un atribut sau o metodă. De exemplu: „4”, „controller.var”, „getValue()”.

Exemplu aici

Sahil Ralkar

Puteți aplica mai multe pipe pentru stil, link și HTML, după cum urmează în .html

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

și în .ts pipe pentru „URL” sanitizer

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

pipe pentru „HTML” sanitizer

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

acest lucru se va aplica ambelor fără a perturba nici un stil și nici un eveniment de clic pe link.

Prince

Puteți, de asemenea, să legați proprietățile clasei componentei angular cu șablonul utilizând legarea proprietăților DOM.

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

Folosind forma canonică ca mai jos:

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

Documentația Angular: https://angular.io/guide/template-syntax#property-binding-property

Vedeți stackblitz de lucru exemplu aici

Suneet Bansal

Putem trece întotdeauna conținutul html către innerHTML pentru a reda conținutul dinamic html, dar acel conținut dinamic html poate fi și el infectat sau rău intenționat. Așadar, înainte de a trece conținutul dinamic la innerHTML ar trebui să ne asigurăm întotdeauna că conținutul este curățat (utilizând DOMSanitizer), astfel încât să putem scăpa de tot conținutul rău intenționat.

Încercați conducta de mai jos:

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>

BogdanC

Modul de a adăuga dinamic elemente la DOM, așa cum este explicat în documentul Angular 2, este prin utilizarea clasei ViewContainerRef din @Angular/core.

Ceea ce trebuie să faceți este să declarați o directivă care va implementa ViewContainerRef și va acționa ca un placeholder în DOM.

Directiva

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

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

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Apoi, în șablonul în care doriți să injectați componenta:

HTML

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

Apoi, din codul componentei injectate, veți injecta componenta care conține HTML-ul pe care îl doriți:

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

}

Am adăugat o aplicație demo complet funcțională pe Angular 2 adaugă dinamic o componentă în DOM demo

João Beirão

Puteți utiliza mai multe abordări pentru a obține soluția. După cum s-a spus deja în răspunsul aprobat, puteți folosi:

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

în funcție de ceea ce încercați să realizați, puteți încerca și alte lucruri, cum ar fi DOM javascript (nu este recomandat, operațiunile DOM sunt lente):

Prezentare

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

Componenta

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

Legătura de proprietăți

Javascript DOM Outer HTML

Comentarii

  • Indiferent dacă operațiile DOM sunt mai lente decât cele din angular sau nu, realizarea lor folosind getElementsById sau orice altă metodă de selecție este proastă, deoarece ar putea captura elemente aparținând unor componente complet diferite dacă acestea conțin elemente cu același id (sau alte criterii). –  > Por Aviad P..
  • În plus, se execută complet în afara oricărei zone angular-zone, astfel încât modificările nu vor fi preluate. –  > Por Philipp Meissner.
Jay Momaya

Dacă doriți acest lucru în Angular 2 sau Angular 4 și, de asemenea, doriți să păstrați CSS inline, atunci puteți utiliza

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

Comentarii

  • Acest lucru mi-a dat o eroare ` Uncaught (in promise): Error: Template parse errors: Țeava ‘keepHtml’ nu a putut fi găsită` –  > Por Praveen.
  • import {Pipe,PipeTransform} from „@angular/core”; – –  > Por Jay Momaya.
FACode

Funcționează în Angular v2.1.1

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

Comentarii

  • Acest lucru produce: <div _ngcontent-luf-0=""></div> pentru mine. div este gol. –  > Por Scott Marcus.
Mvin

Doar pentru a posta o mică completare la toate răspunsurile grozave de până acum: Dacă utilizați [innerHTML] pentru a reda componente Angular și sunteți supărat că nu funcționează, ca mine, aruncați o privire pe ngx-dynamic-hooks pe care am scris-o pentru a rezolva exact această problemă.

Cu ea, puteți încărca componente din șiruri dinamice/html fără a compromite securitatea. De fapt, folosește biblioteca Angular’s DOMSanitizer la fel ca și [innerHTML] o face, dar păstrează capacitatea de a încărca componente (într-o manieră sigură).

Vedeți-l în acțiune în acest Stackblitz.

Hasee Amarathunga

Puteți utiliza următoarele două moduri.

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

sau

<div innerHTML="{{myVal}}"></div>

Naeem Bashir

Acest lucru funcționează pentru mine: soluția sa bes

 <div innerHTML = "{{ varible}}"></div>

Comentarii

  • Vă rugăm să nu postați răspunsuri „și eu”. Acesta este un duplicat al răspunsurilor existente stackoverflow.com/a/32104766 și stackoverflow.com/a/64939706 –  > Por Blastfurnace.
Guntram

Dacă aveți șabloane în aplicația dumneavoastră angular (sau orice alt framework) și returnați șabloane HTML din backend printr-o cerere/răspuns HTTP, amestecați șabloanele între frontend și backend.

De ce nu lăsați chestiile de șabloane fie în frontend (aș sugera asta), fie în backend (destul de intransparent imo)?

Și dacă păstrați șabloanele în frontend, de ce nu răspundeți doar cu JSON pentru cererile către backend. Nici măcar nu trebuie să implementați o structură RESTful, dar păstrarea șabloanelor într-o parte face codul mai transparent.

Acest lucru se va răsplăti atunci când altcineva va trebui să se descurce cu codul dvs. (sau chiar dvs. însuși reintroduceți propriul cod după un timp)!

Dacă o faceți corect, veți avea componente mici cu șabloane mici și, cel mai bine, dacă codul dvs. este imba, cineva care nu cunoaște limbaje de codare va putea să vă înțeleagă șabloanele și logica! Așa că, în plus, păstrați-vă funcțiile/metodele cât mai mici posibil. în cele din urmă veți descoperi că întreținerea, refactorizarea, revizuirea și adăugarea de caracteristici vor fi mult mai ușoare în comparație cu funcțiile/metodele/clasele mari și cu amestecarea șabloanelor și a logicii între frontend și backend – și păstrați cât mai multă logică în backend dacă frontend-ul dvs. trebuie să fie mai flexibil (de exemplu, scrierea unui frontend android sau trecerea la un cadru de frontend diferit).

Filosofie, omule 🙂

p.s.: nu trebuie să implementați un cod 100% curat, pentru că este foarte costisitor – mai ales dacă trebuie să motivați membrii echipei ;)dar: ar trebui să găsiți un bun echilibru între o abordare a unui cod mai curat și ceea ce aveți (poate că este deja destul de curat)

consultați cartea dacă puteți și lăsați-o să vă intre în suflet:https://de.wikipedia.org/wiki/Clean_Code

Comentarii

  • -2 voturi. Hah. Ok, voi vota pentru acest răspuns, doar pentru că este evident că celelalte răspunsuri sunt aproape la fel. Deși acest răspuns nu oferă o soluție curată, este un răspuns care te pune pe gânduri, și nu un copy-paste al soluției cuiva.____ În cazul meu nu am putut folosi această soluție, pentru că aveam o bibliotecă în backend care returnează codul pe care trebuie să îl afișez ca html intern.Dacă ar trebui să mut totul din acea bibliotecă, probabil m-ar costa o săptămână sau două. Uneori nu este posibil. Dar poate că voi muta doar stilurile de pe partea clientului, ceea ce ar putea sau nu să-mi rezolve problema. –  > Por makkasi.