Ich übergebe Eigenschaften an Polymer 1.0 von Angular 2

Question

Ich versuche, Polymer in einer Angular 2-Komponente zu verwenden. Wenn ich statische Werte an Polymer übergebe, erscheinen sie, aber wenn ich versuche, dass Angular 2 eine Variable an die Polymerkomponente bindet, kommt sie nicht durch. Polymer erhält den Standardwert und läuft gut, kann aber den Wert von Angular nicht sehen.

A Plunker dieses Verhaltens ist hier:

<polymer-component [(polymer-property)]="angular2Varialbe"></polymer-component> 

Nicht:

http://plnkr.co/edit/FU5cWuuc7vIz8lvtPwuC?p=preview

Von dem, was ich gelesen habe, sollte ich den Angular 2 -Wert zu binden, mit dieser Syntax der Lage sein, Sicher, wo ich falsch liege, aber jede Hilfe wird geschätzt!

Answer 1

Die Winkel Dokumentation heißt es:

„In der Welt der Angular 2 ist die einzige Rolle von Attributen Element initialisieren und staatliche Direktive Wenn wir Daten zu binden, sind wir ausschließlich mit dem Element handelt. und Direktive Eigenschaften und Ereignisse. Attribute effektiv verschwinden. "

also der richtige Weg, die Bindung an die Arbeit zu bekommen, ist [(user-name)][(userName)] und nicht zu schreiben.

Obwohl dies zu "funktionieren" scheint, funktioniert es nur von Angular zu Polymer, nicht umgekehrt. Blind zu Änderungen an der Webkomponente machen.

Ich habe ein Beispiel unter Verwendung von Code mit Zweiweg-Datenbindung unter Verwendung von Methoden, die auf der Dokumentation beschrieben hergestellt (ich hoffe, dass sie die Integration erleichtern, um so die vorformulierten zu reduzieren):

<hello-name [userName]="userName" (user-name-changed)="userName=$event.target.userName" id="hero"></hello-name> 

http://plnkr.co/edit/dwd1x3o6RgyOxwNjyIBx?p=preview

im Beispiel habe ich eine Schaltfläche hinzugefügt, die die webcomponent Eigenschaft ändert, und Sie können überprüfen, wie es das Winkelmodell aktualisiert, auch, wenn Sie die ID ändern "hero":

let element = document.getElementById("hero"); 

zu:

let element = document.getElementById("hero0"); 

Sie können überprüfen, wie die vorformulierten benötigt wird. In diesem Fall hat der Knoten nicht die (user-name-changed)="userName=$event.target.userName" nur [(userName)]="userName", wenn Sie die Eigenschaft der Webkomponente über Javascript aktualisieren, wird der eckige Kontext nie aktualisiert.