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

Question

tldr： 当 Angular 更新 paper-dropdown-menu 的子级时，父级不会重新加载或对更改做出反应。例如，“选定”选项不会绑定到新项目，除非我们也更新它。 示例代码可在此处获得：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
};