Angular 2 - È possibile associare il componente dell'app al DOM esistente senza cancellare il contenuto HTML?

Provo a eseguire il bootstrap del mio componente angolare principale in un documento HTML pre-eseguito. Questo è il mio DOM esistente:Angular 2 - È possibile associare il componente dell'app al DOM esistente senza cancellare il contenuto HTML?

<html> 
<head></head 
<body> 

<!-- this is my template generated with Symfony --> 
<div ...> 
<ul> 
    <li><angularComponent></angularComponent></li> 
    <li><angularComponent></angularComponent></li> 
</ul> 
</div> 

</body> 
</html>

voglio legare il mio principale App componente (o direttiva) sul corpo, o sul div principale, senza sostituire il mio pre contenuti generati (con symfony).

È possibile? Hai altra soluzione?

Grazie,

fonte

2016-01-25 mgonzalez

Di solito questo è fatto con l'aggiunta di <ng-content></ng-content> al modello del vostro angolare AppComponent s modello, ma per quanto ne so questo non è supportato sul componente dell'applicazione, solo su componenti figlio.

Si potrebbe provare a impostare encapsulation: ViewEncapsulation.Native su AppComponent e utilizzare <content></content> anziché <ng-content></ng-content>.

Non ho ancora provato questo.

fonte

2016-01-25 13:38:51

Ho provato le due soluzioni, sfortunatamente, non funziona nella mia configurazione. Penso che lavorerò su ViewEncapsulation per capire meglio il meccanismo. Ti ringrazio. – mgonzalez

'' e '' sono uno slot in cui il componente Angolare proietta i suoi elementi figlio. Con '' la proiezione è fatta da Angular. Con '' è fatto dal browser https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content (potrebbe essere necessario polyfill). AFAIK per motivi di sicurezza Angular intenzionalmente non supporta quello per l'elemento radice. –

Capisco i problemi di sicurezza, spero che il team abbia o avrà una soluzione per questo scopo. Le applicazioni a singola pagina non sono ancora diffuse e penso che molte persone vorrebbero utilizzare Angular2 con un DOM/template esistente e pre generato. Inoltre, l'elemento è ora deprecato. Ho una soluzione molto triste e inelegante al mio problema: ho catturato il DOM pregenerato con Jquery in una variabile Javascript globale e l'ho iniettato nel modello del mio componente Angular2 utilizzando un auto chiamato closure. Ciò può causare problemi con un grande contenuto DOM. – mgonzalez

Ok, quindi non ho trovato alcun buone risposte a questa domanda, ecco il modo (hacky) ho fatto:

document.getExistingContentByTag = function(tagName){ 
    var target = document.getElementsByTagName(tagName)[0]; 

    if(!target || !target.tagName) return ''; 

    return target.innerHTML; 
}

E per rendere il modello:

@Component({ 
selector: 'my-app', 
template: document.getExistingContentByTag('my-app') 
})

Così estrae il contenuto del tag my-app, fa la sua magia e lo scrive indietro.

fonte

2016-02-26 20:21:12

Questo non funziona se nell'elemento è presente un codice angolare, poiché innerHTML restituisce sempre i tag HTML in minuscole lettere (almeno in Chrome), perché HTML non fa distinzione tra maiuscole e minuscole. Quindi, per esempio, se hai un attributo [(ngModel)] non funziona in seguito e viene generato un errore, perché ngmodel è sconosciuto ('Impossibile collegarsi a 'ngmodel' poiché non è una proprietà conosciuta di 'input ''). – Markus

Angular 2 - È possibile associare il componente dell'app al DOM esistente senza cancellare il contenuto HTML?

risposta

Problemi correlati