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.

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:

 
{{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)