Angolare 2 – stile interno HTML

Sto ottenendo blocchi di codici HTML da chiamate HTTP. Metto i blocchi HTML in una variabile e lo inserisco sulla mia pagina con [innerHTML] ma non riesco a disegnare il blocco HTML inserito. Qualcuno ha qualche suggerimento su come potrei ottenere questo?

@Component({selector: 'calendar', template: '
', providers:[HomeService], styles: [` h3 {color:red;} `})

L’HTML che voglio modellare è il blocco contenuto nella variabile “calendario”.

aggiornamento :: ng-deep

/deep/ stato deprecato e sostituito da ::ng-deep .

::ng-deep è già contrassegnato come deprecato, ma non è ancora disponibile la sostituzione.

Quando ViewEncapsulation.Native è supportato correttamente da tutti i browser e supporta lo styling sui confini del DOM ombra, probabilmente verrà interrotta la funzione ::ng-deep .

originale

Angolare aggiunge tutti i tipi di classi CSS all’HTML che aggiunge al DOM per emulare l’incapsulamento CSS DOM ombra per impedire stili di sanguinamento all’interno e all’esterno dei componenti. Angular riscrive anche il CSS che aggiungi per abbinare queste classi aggiunte. Per HTML aggiunto usando [innerHTML] queste classi non vengono aggiunte e il CSS riscritto non corrisponde.

Come soluzione alternativa

  • per CSS aggiunto al componente
 /* :host /deep/ mySelector { */ :host ::ng-deep mySelector { background-color: blue; } 
  • per CSS aggiunto a index.html
 /* body /deep/ mySelector { */ body ::ng-deep mySelector { background-color: green; } 

>>> (e l’equivalente /deep/ ma /deep/ funziona meglio con SASS) e ::shadow sono stati aggiunti in 2.0.0-beta.10. Sono simili ai combinatori DOM CSS ombra (che sono deprecati) e funzionano solo con l’ encapsulation: ViewEncapsulation.Emulated che è il valore predefinito in Angular2. Probabilmente funzionano anche con ViewEncapsulation.None ma vengono quindi ignorati solo perché non sono necessari. Questi combinatori sono solo una soluzione intermedia finché non sono supportate funzionalità più avanzate per lo styling cross-component.

Un altro approccio è da usare

 @Component({ ... encapsulation: ViewEncapsulation.None, }) 

per tutti i componenti che bloccano il tuo CSS (dipende da dove si aggiunge il CSS e dove l’HTML è quello che si vuole stile – potrebbero essere tutti i componenti della propria applicazione)

Aggiornare

Esempio Plunker