Question

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

这种行为的一个类型就在这里：

根据我的阅读，我应该能够使用以下语法绑定Angular 2值：

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

不确定我哪里出错了，但感谢任何帮助！

Answer 1

角度文档声明：

“在Angular 2的世界中，属性的唯一作用是初始化元素和指令状态。当我们数据绑定时，我们就是专门处理元素和指令属性和事件。属性有效消失。“

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

尽管这似乎“有效”，但它只能从Angular到Polymer，而不是相反。对网络组件的变化进行角度盲目。

我使用您的代码使用文档中描述的方法使用双向数据绑定（我希望它们可以使集成更容易，有助于减少样板）：

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

在示例中，我添加了一个更改webcomponent属性的按钮，您可以验证它如何更新角度模型，如果您更改了ID "hero"：

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

为：

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

您可以验证是否需要样板。在这种情况下，节点没有(user-name-changed)="userName=$event.target.userName"只[(userName)]="userName"，当您通过javascript更新Web组件的属性时，角度上下文永远不会更新。