Come generare elementi HTML non restituiti su una pagina Web con Angular 2.1.1 come StackOverflow?

Quello che sto cercando di fare:

Sto tentando di creare una pagina Web con Angular2 che mostra HTML sullo schermo più o meno allo stesso modo di molti siti Web come stackoverflow, css-tricks e w3schools (per citarne alcuni). Vorrei poter copiare il codice e incollarlo da qualche altra parte dopo la sua visualizzazione sullo schermo.

• Iterating over Promises in modo ricorsivo
• Il mio componente Angular 2 Table - Associazione dati bidirezionale
• Come inserisco una linea sotto un pulsante quando è selezionato?
• Il menu a discesa della barra di navigazione non funziona con Angular e Bootstrap 4
• Caratteri EOF in html quando si uniscono i modelli angular2?

Quello che so:

Mi sono reso conto che probabilmente sarà necessario convertire tutti i miei tag di apertura (cioè, < ) in &lt e convertire tutti i miei tag di chiusura (cioè, > ) in &gt , tuttavia non sono ancora sicuro di quale sia il migliore modo di interpolare alcune variabili nel modello.

Ad esempio, ho questo nel mio file di modello:

• ngPer creare 2 righe
• Come associare dati dinamici ad ARIA-LABEL?
• Per rendere due ng2-datetimepickers e ottenere il suo valore
• Convalida modulo AngularJS non riuscita quando l'input è popolato dinamico
• Imansible ordinare in senso inverso usando PipeTransform in angular4

 
{{myTitle}}
 
{{mySubTitle}}
 
 
 
{{item1}}
 
{{item2}}
 
{{item3}}
 
  

Cosa voglio vedere (ed essere in grado di copiare) nel browser:

 
This is my title
 
This is my subtitle
 
 
 
Apple
 
Orange
 
Durian
 
  

L’overflow dello stack rende questa operazione davvero semplice e piacevole, consentendo di evidenziare il codice che si desidera visualizzare sullo schermo e facendo clic sul pulsante {} nell’editor. Tuttavia, quando provo a usare i

 e  nella mia app Angular2, non ottengo lo stesso risultato, non riesco a vedere gli elementi HTML reali come 
 e 
 . 
  Invece quello che vedo è: 
 {{myTitle}} {{mySubTitle}} {{item1}} {{item2}} {{item3}} 
  Ho usato manubri in passato e ho familiarità con quella libreria, ma avevo l'impressione che l'utilizzo di Angular2 avrebbe eliminato la necessità di handlebarsjs .  Qualcuno sa come realizzare ciò che sto cercando di fare in Angular2 senza handlebarsjs ? 

    

        


	

		      	
  Per < e > probabilmente dovrai usare &lt e &gt . 
  Per le parentesi nelle espressioni del modello potresti voler usare la direttiva ngNonBindable. 
 
 {{myTitle}}  



		      	
  Usa 


 o  per HTML per renderlo reso letterale. 
 
 
{{'{{'}}myTitle{{'}}'}}
 
{{'{{'}}mySubTitle{{'{{'}}
 
 
 
{{'{{'}}item1{{'{{'}}
 
{{'{{'}}item2{{'{{'}}
 
{{'{{'}}item3{{'{{'}}
 
 
 
 
  Devi sfuggire { e } (ad esempio, come mostrato sopra)