Angular 2 - Es ist möglich, die App-Komponente im vorhandenen DOM zu binden, ohne den HTML-Inhalt zu löschen?

Ich versuche, meine Hauptwinkelkomponente in einem zuvor ausgeführten HTML-Dokument zu laden. Dieses ist mein bestehender DOM:Angular 2 - Es ist möglich, die App-Komponente im vorhandenen DOM zu binden, ohne den HTML-Inhalt zu löschen?

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

Ich mag meine Haupt App Komponente binden (oder Richtlinie) auf dem Körper oder an der Haupt div, ohne dass ich vorher ersetzt generierte Inhalte (mit symfony).

Es ist möglich? Hast du andere Lösung?

Danke,

Quelle

2016-01-25 mgonzalez

Normalerweise wird dies durch <ng-content></ng-content> die Vorlage Ihrer Angular AppComponent s Vorlage Hinzufügen getan, aber AFAIK ist dies nicht auf der Anwendungskomponente unterstützt, nur auf untergeordneten Komponenten.

Sie könnten versuchen, encapsulation: ViewEncapsulation.Native auf AppComponent zu setzen und <content></content> statt <ng-content></ng-content> zu verwenden.

Ich habe das selbst noch nicht ausprobiert.

Quelle

2016-01-25 13:38:51

Ich habe versucht, die beiden Lösungen, leider funktioniert es nicht in meiner Konfiguration. Ich denke, ich werde an ViewEncapsulation arbeiten, um den Mechanismus besser zu verstehen. Ich danke dir. – mgonzalez

'' und '' sind ein Slot, auf den die Angular-Komponente ihre untergeordneten Elemente projiziert. Mit '' erfolgt die Projektion mit Angular. Mit '' wird es durch den Browser https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content gemacht (benötigt Polyfill). AFAIK aus Sicherheitsgründen Angular unterstützt dies absichtlich nicht für das Wurzelelement. –

Ich verstehe die Sicherheitsprobleme, ich hoffe, dass das Team eine Lösung für diesen Zweck hat oder haben wird. Einzelseiten-Anwendungen sind noch nicht weit verbreitet und ich denke, dass viele Leute Angular2 mit einem vorhandenen und vorgenerierten DOM/Template verwenden möchten. Darüber hinaus ist das Element jetzt veraltet. Ich habe eine sehr traurige und unelegante Lösung für mein Problem: Ich fing das vorgenerierte DOM mit Jquery in einer globalen Javascript-Variablen auf und injizierte es in die Vorlage meiner Angular2-Komponente, indem ich ein automatisches Closing verwendete. Dies kann zu Problemen mit einem großen DOM-Inhalt führen. – mgonzalez

Ok, so habe ich keine gute Antworten auf diese Frage zu finden, hier ist die (Hacky) so, wie ich es tat:

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

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

    return target.innerHTML; 
}

Und die Vorlage zu machen:

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

So Es zieht den Inhalt des my-app-Tags, macht seine Magie und schreibt es zurück.

Quelle

2016-02-26 20:21:12

Dies funktioniert nicht, wenn ein Winkelcode in dem Element vorhanden ist, da innerHTML die HTML-Tags immer in Kleinbuchstaben (zumindest in Chrome) zurückgibt, weil HTML ein Fall ist. Wenn Sie zum Beispiel ein [(ngModel)] - Attribut haben, funktioniert es danach nicht und es wird ein Fehler ausgelöst, weil ngmodel unbekannt ist ('Kann nicht an 'ngmodel' binden, da es keine bekannte Eigenschaft von 'input' ist ""). – Markus

Angular 2 - Es ist möglich, die App-Komponente im vorhandenen DOM zu binden, ohne den HTML-Inhalt zu löschen?

Antwort

Verwandte Themen