3

在聚合物元素内动态创建 html 导入

有谁知道如何将 html 导入动态添加到聚合物元素（1.0 版）中？

下面的代码似乎不起作用，并抱怨.. HTML element <link> is ignored in shadow tree.

有谁知道解决这个问题或知道更好的方法？

<!-- here is where the created import could go -->

<dom-module id="my-component">

<!-- here is where I'd ideally like the import to be created -->

  <template>
    <div id="container">

      <!--This is where my dynamically loaded element should be placed-->

    </div>
  </template>

  <script>
    Polymer({is:'my-component',
      attached: function(){

        var importElem = document.createElement('link');
        importElem.rel = 'import';
        importElem.href = '/components/my-dynamic-sub-component.html';
        this.root.appendChild(importElem);
        var app = document.createElement('my-dynamic-sub-component');
        this.$.container.appendChild(app);

      }
    });
  </script>

</dom-module>
4

2 回答 2

11

importHref(href, onLoad, onError)Polymer 1.0对每个 Polymer 组件都有实用功能。要动态导入和添加您的外部元素，您可以使用以下代码：

this.importHref('path/to/page.html', function(e) {
  // e.target.import is the import document.
  var newElement = document.createElement('new-element');
  newElement.myProperty = 'foo';

  Polymer.dom(this.$.container).appendChild(newElement);  
}, function(e) {
  // loading error
});
于 2015-06-05T17:57:47.820 回答
1

我不确定您是否可以动态添加 HTML 导入并使其在另一个元素中工作，但您需要使用 Polymer 的 DOM API。见这里。

像这样的东西：

Polymer({is:'my-component',
  attached: function(){

    //create element and add it to this 
    var importElem = document.createElement('link');
    importElem.rel = 'import';
    importElem.href = '/components/my-dynamic-sub-component.html';
    Polymer.dom(this.root).appendChild(importElem);
    var app = document.createElement('component-controler');
    Polymer.dom(this.$.container).appendChild(app);
  }
});
于 2015-06-05T13:57:34.063 回答