使用Angular更新聚合物元素的子代不会导致父级重新加载和重新绑定 [英] Updating children of polymer elements using Angular doesnt cause parents to reload and rebind

问题描述

tldr::当Angular更新paper-dropdown菜单的子项时，父项不会重新加载或对更改做出反应.例如，选择"选项不会绑定到新项目，除非我们也进行更新. 示例代码可在此处找到: https://github.com/dirtysanchez69/issue-angular2 -聚合物

tldr: When children of paper-dropdown-menu are updated by Angular, the parent does not reload or react to the change. The "selected" option does not bind to the new items, for example, unless we it update as well. The example code is available here: https://github.com/dirtysanchez69/issue-angular2-polymer

说我有一个下拉菜单，这样(可以正常工作):

Say I have a paper-dropdown-menu, as such (this works fine):

//hardcoded options and selection

<paper-dropdown-menu label="hardcoded options and selection">
  <paper-listbox 
  [selected]="1"
  class="dropdown-content">
    <paper-item *ngFor="let option of ['hi', 'hello', 'yo']">{{option}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

在这种情况下，假定子项(纸张项)在父项(paper-listbox)之前被解析，并且父项选择其子项中的第二个作为选定值.

In this case, the child (paper-item) is presumably parsed before the parent (paper-listbox), and the parent selects the second of it's children to be the selected value.

现在，如果这些选项稍后出现，那么在异步事件之后，这些选项(纸张项)就可以更新了，但是我们丢失了所选的值.

Now, if the options arrive a bit later, after an async event, the options (paper-items) are updated just fine, but we lose the selected value.

//hardcoded selection

<paper-dropdown-menu label="hardcoded selection">
  <paper-listbox 
  [selected]="1"
  class="dropdown-content">
    <paper-item *ngFor="let option of dropdownOptions.fruit">{{option}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

如果dropdownOptions.fruit用某些值初始化，我们会看到选定的值，但是在更新选项后，选定的值就会消失.

If dropdownOptions.fruit is initialized with some values, we see the selected value, but upon updating the options, the selected value disappears.

现在，如果我们还绑定所选值，并且在接收到新数据时也对其进行更新，那么将显示新的所选值(万岁).但是，这仅在我们实际更改"selected"属性的值时才有效.如果我们将此值初始化为1，则必须选择另一个数字才能触发更新(这仍然给我们带来了问题).

Now, if we also bind the selected value, and we update that as well, upon receiving the new data, then the new selected value is displayed (hooray). However, this only works if we actually change the value of the "selected" property. If we initialize this value to 1, then we must pick another number in order to trigger the update (which still leaves us with a problem).

<paper-dropdown-menu label="selection refresh" #fruitDropdown >
  <paper-listbox 
  [selected]="userData.fruitSelection"
  class="dropdown-content">
    <paper-item *ngFor="let option of dropdownOptions.fruit">{{option}}</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

您如何看待? 是否有一种干净的方法来强制触发聚合物元件上的重新加载?

What do you think of this? Is there a clean way to forcibly trigger a reload on a polymer element?

推荐答案

如GünterZöchbauer 提到，处于阴影模式的Polymer不能与Angular2配合使用.全局启用阴影模式可以解决此问题.

As Günter Zöchbauer mentioned, Polymer in shady mode does not play nice with Angular2. Enabling shadow mode globally solved this issue.

@ vaadin/angular2-polymer (此处使用的集成库)背后的团队，知道并正在解决此问题.查看问题.

The team behind @vaadin/angular2-polymer (the integration library used here), is aware of and working on this problem. Check out the Issue.

如果遇到此类困难，请将此脚本添加到index.html

If you are experiencing difficulties of this kind, add this script to your index.html

window.Polymer = {
  dom: 'shadow',
  lazyRegister: true
};

这篇关于使用Angular更新聚合物元素的子代不会导致父级重新加载和重新绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！