使用Angular更新聚合物元素的子元素不会导致父母重新加载和重新绑定

Question

tldr：当Angular更新了纸张下拉菜单的子项时，父级不会重新加载或对更改作出反应。例如，“selected”选项不会绑定到新项目，除非我们也更新。 示例代码可在此处找到：https://github.com/dirtysanchez69/issue-angular2-polymer

说我有一个纸质下拉菜单，因此（这样可以正常工作）：

//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-item）可能在父（paper-listbox）之前解析，而父选择其中第二个孩子作为选定值。

现在，如果选项稍后到达，在异步事件之后，选项（纸张项）会更新，但我们会丢失所选值。

//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，我们会看到所选的值，但在更新选项后，所选的值将消失。

现在，如果我们也绑定了所选的值，并且我们也会更新它，在收到新数据后，将显示新的选定值（万岁）。但是，这仅在我们实际更改“selected”属性的值时才有效。如果我们将此值初始化为1，那么我们必须选择另一个数字才能触发更新（这仍然会让我们遇到问题）。

<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>

你怎么看待这个？ 是否有一种干净的方法来强制触发聚合物元件的重新加载？

Answer 1

如Günter Zöchbauer所述，在阴影模式下，聚合物与Angular2的效果不佳。全局启用阴影模式解决了这个问题。

@vaadin/angular2-polymer（此处使用的集成库）背后的团队了解并解决此问题。查看Issue。

如果您遇到此类问题，请将此脚本添加到index.html

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