Dopo aver letto molto e stando vicino all'apertura di un nuovo argomento, ho deciso di rispondere qui solo per cercare di aiutare gli altri. Come ho visto ci sono diversi cambiamenti con l'ultima versione di angolare 2. (Attualmente Beta9)
Cercherò di condividere il mio codice al fine di evitare la stessa frustrazione che ho avuto ...
in primo luogo, nel nostro index.html
come al solito, noi dovremmo avere qualcosa di simile:
<html>
****
<body>
<my-app>Loading...</my-app>
</body>
</html>
AppComponent (utilizzando innerHTML)
Con questa struttura si sarà in grado di rendere l'HTML di base, ma non sarà in grado di fare qualcosa di simile a 1.x angolare da $ compilare attraverso un campo di applicazione:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<h1>Hello my Interpolated: {{title}}!</h1>
<h1 [textContent]="'Hello my Property bound: '+title+'!'"></h1>
<div [innerHTML]="htmlExample"></div>
`,
})
export class AppComponent {
public title = 'Angular 2 app';
public htmlExample = ' <div>' +
'<span [textContent]="\'Hello my Property bound: \'+title"></span>' +
'<span>Hello my Interpolated: {{title}}</span>' +
'</div>'
}
Questo renderà il seguente:
Ciao my Interpolated: Angular 2 app!
Hello my Property bound: Angular 2 app!
Ciao il mio interpolata: {{title}}
AppComponent Utilizzando DynamicComponentLoader
C'è un piccolo bug con la documentazione, documentata in here. Quindi, se abbiamo in mente che, il mio codice dovrebbe essere ora in questo modo:
import {DynamicComponentLoader, Injector, Component, ElementRef, OnInit} from "angular2/core";
@Component({
selector: 'child-component',
template: `
<div>
<h2 [textContent]="'Hello my Property bound: '+title"></h2>
<h2>Hello my Interpolated: {{title}}</h2>
</div>
`
})
class ChildComponent {
title = 'ChildComponent title';
}
@Component({
selector: 'my-app',
template: `
<h1>Hello my Interpolated: {{title}}!</h1>
<h1 [textContent]="'Hello my Property bound: '+title+'!'"></h1>
<div #child></div>
<h1>End of parent: {{endTitle}}</h1>
`,
})
export class AppComponent implements OnInit{
public title = 'Angular 2 app';
public endTitle= 'Bye bye!';
constructor(private dynamicComponentLoader:DynamicComponentLoader, private elementRef: ElementRef) {
// dynamicComponentLoader.loadIntoLocation(ChildComponent, elementRef, 'child');
}
ngOnInit():any {
this.dynamicComponentLoader.loadIntoLocation(ChildComponent, this.elementRef, 'child');
}
}
Questo renderà il seguente:
Ciao il mio interpolata: Angolare 2 app!
Hello my Property bound: Angular 2 app!
Ciao legato la mia proprietà: ChildComponent titolo
Ciao il mio interpolata: titolo ChildComponent
Fine del genitore: Bye bye!
È possibile modificare l'HTML del modello in fase di esecuzione utilizzando JavaScript? L'HTML non è noto in anticipo per essere in grado di inserirlo nel modello ... è calcolato al volo. –
AFAIK Non è possibile modificare le proprietà dei decoratori di componenti. E questa non è una buona idea. – alexpods
Quindi, immagina lo scenario in cui hai json che ritorna dal server nel tempo. Si desidera mostrare una diff tra due di queste risposte json con una formattazione html iniettata per verde o rosso in base a se una riga è stata aggiunta o rimossa. Questo non è un caso d'uso supportato in Angular2 per quanto ne sai dato che il template è dinamico? – JimTheDev