2016-01-13 10 views
7

Ich habe eine Reihe von benutzerdefinierten Polymer-Elemente, die ich gerne in einem Winkel 2 Anwendung verwenden würde.Polymerelemente in Winkel 2 Komponente

Es scheint, als gäbe es ein Problem bezüglich der Inhaltsmarkierung des Polymerelements. Der Inhalt des Elements wird an der falschen Stelle innerhalb des Polymerelements gerendert, wenn sich das Element innerhalb einer Winkelkomponente befindet.

Beispiel:

Die Vorlage meines Polymerelement "my-Taste" sieht wie folgt aus:

<template> 

    <button> 
    <content></content> 
    </button> 

</template> 

Verwendung außerhalb Winkel

Wenn ich dieses Elements außerhalb meines Winkel 2 Komponente, bekomme ich das Ergebnis, das ich erwartet habe:

Verwendung:

<my-button>Foo</my-button> 

Ergebnis:

<my-button> 
    <button> 
    Foo 
    </button> 
<my-button> 

Verwendung innerhalb Winkel 2 -Komponente

Wenn innerhalb eines Winkels 2 Komponente verwendet wird, der Gehalt immer am Ende der Elemente Vorlage gerendert wird. Genauso wie das Content-Tag nicht existiert.

Verwendung:

<my-button>Foo</my-button> 

Ergebnis:

<my-button> 
    <button> 

    </button> 
    "Foo" 
<my-button> 

Frage

Das Problem könnte sein, dass das Polymer und Winkel 2 sowohl den Inhalt als Tag für transclution verwenden. Vielleicht werden die Dinge ein wenig unordentlich, wenn man beide zusammen benutzt.

Ich würde gerne alle meine Polymer-Elemente in eckigen 2 verwenden. Also jede Idee, wie dies zu beheben wäre sehr geschätzt.

+1

veröffentlicht Haben Sie versucht, mit dem 'WebComponentsReady' Ereignis wartet, bevor irgendwelche Winkel Skripte anwenden? –

Antwort

8

Es gibt ein paar offene Fragen über Angular2 in Kombination mit Polymer. Zum Beispiel verwendet Angular Polymer.dom(el)... zum Manipulieren eines Polymerelements nicht. Dies ist wahrscheinlich, was Ihre Komponenten zerstört. Eine Problemumgehung besteht darin, vollständiges Schatten-DOM und Polyfill zu aktivieren. Siehe https://www.polymer-project.org/1.0/docs/devguide/settings.html

Ein Problem, das ich keine Lösung noch vergeht <template> s gefunden habe (wie für <iron-list> beispielsweise erforderlich. Angular Griffe Vorlagen auf seinem eigenen und es nicht passieren, um das Polymerelement.

es gibt eine ngNonBindable Richtlinie. ich habe es nicht versucht noch auf der <template ngNonBindable> mich, aber es könnte funktionieren. ich versuchte es nur das ist, scheint [prop]="field"/prop="{{field}} Bindungen zu ignorieren.

ein weiteres Problem mit <style is="custom-style"> ist.Sie können nur in das Element <head> oder in Polymerelemente, nicht jedoch in eckige Komponenten hinzugefügt werden.

Siehe auch Two-way binding in Angular 2 with NgModel and mutating bound property?

+0

Ich habe versucht, Polymer-Komponenten, nehmen Sie zum Beispiel die Papier-Checkbox, jetzt, wenn ich die Eigenschaft gebunden checked '[checked] =" myselection "' es einfach setzt die Boolean aber nicht, wenn überprüft? Gibt es eine Erklärung, warum sich diese Elemente so verhalten? PS ich habe dom = 'shady' aktiviert –

+0

@PratikKelwalkar Polymer mit schattigen DOM funktioniert nicht gut mit Angular2. Ich schlage vor, stattdessen Shadow DOM zu aktivieren. Nicht sicher, was Sie mit "aber nicht, wenn überprüft" bedeutet. Du brauchst '[checked] =" meineAuswahl "(checkedChanged) =" myselection = $ event "' (nicht selbst getestet) –

+0

Ok danke zoechi, ich probiere aus, was ich wollte war herauszufinden, ob das Kontrollkästchen mit aktiviert wurde das Attribut [checked], aber ich konnte den boolean nicht abrufen, sondern konnte nur den Wert setzen. –

7

Check out https://www.npmjs.com/package/@vaadin/angular2-polymer, die die meisten Probleme bei der Integration von Polymerelementen Angular 2.

Handbuch lösen sollte: https://github.com/vaadin/vaadin-core-elements/blob/master/docs/angular2.adoc

Tutorial (Entwurf): https://github.com/vaadin/angular2-polymer/blob/d4581e8fd82841eea84ef40e16e262a12ee4b082/docs/tutorial.adoc

Bessere schattige DOM-Unterstützung wartet darauf, aus einem separaten Zweig zusammengeführt zu werden (sollte innerhalb von zwei Wochen zusammengeführt und veröffentlicht werden): https://github.com/vaadin/angular2-polymer/tree/feature/polymer-dom-adapter

Es wäre großartig, wenn Sie es ausprobieren könnten und sehen, ob es für Sie funktioniert!

Schließlich wird die Dokumentation in https://vaadin.com/docs/