将特性从Angular 2传递到Polymer 1.0 [英] Passing properties to Polymer 1.0 from Angular 2

问题描述

我正在尝试在Angular 2组件中使用Polymer.当我将静态值传递给Polymer时，它们会出现，但是当我尝试让Angular 2将变量绑定到Polymer组件时，它不会通过.Polymer获得默认值并且运行良好，但是无法从Angular中看到该值.

I'm trying to use Polymer in an Angular 2 component. When I pass static values to Polymer they appear, but when I try to have Angular 2 bind a variable to the Polymer component it doesn't come through. Polymer gets the default value and runs fine, but can't see the value from Angular.

此行为的重头戏在这里:

A Plunker of this behavior is here:

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

从我的阅读中，我应该能够使用以下语法绑定Angular 2值:

From what I've read, I should be able to bind the Angular 2 value with this syntax:

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

不知道我要去哪里错了，但是可以提供任何帮助！

Not sure where I'm going wrong, but any help is appreciated!

推荐答案

角度文档指出:

在Angular 2的世界中，属性的唯一作用是初始化元素和指令状态.当我们进行数据绑定时，专门处理元素和指令属性和事件.属性实际上消失了."

"In the world of Angular 2, the only role of attributes is to initialize element and directive state. When we data bind, we're dealing exclusively with element and directive properties and events. Attributes effectively disappear."

因此，使绑定起作用的正确方法是编写 [(userName)] ，而不是 [(user-name)] .

So, the correct way to get the binding to work is to write [(userName)] and not [(user-name)].

尽管这似乎可行"，但它仅从Angular到Polymer起作用，反之则不行.使角度看不见web组件上的更改.

Even though this seems to "work", it only does from Angular to Polymer, not the other way around. Making angular blind to changes on the webcomponent.

我已经使用您的代码作为示例，并使用文档中介绍的方法进行了两种方式的数据绑定(希望它们可以使集成更容易，有助于减少样板):

I've made an example using your code with two way data binding using methods described on the documentation (I hope they will make the integration easier, helping to reduce the boilerplate):

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

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

在示例中，我添加了一个按钮，该按钮可以更改webcomponent属性，并且如果更改id "hero" ，您还可以验证其如何更新角度模型:

In the example, I've added a button which changes the webcomponent property, and you can verify how it updates the angular model, also, if you change the id "hero":

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

收件人:

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

您可以验证如何需要样板.在这种情况下，节点没有 [(username)] ="userName" "<用户名已更改)=" userName = $ event.target.userName".代码>，当您通过javascript更新Web组件的属性时，角度上下文永远不会更新.

You can verify how the boilerplate is needed. In this case the node doesn't have the (user-name-changed)="userName=$event.target.userName" just [(userName)]="userName", when you update the property of the web component through javascript, the angular context is never updated.

这篇关于将特性从Angular 2传递到Polymer 1.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！