在 polymer 元素中动态创建 html 导入
有谁知道如何将 html 导入动态添加到 polymer 元素(版本 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>
最佳答案
Polymer 1.0 在每个 Polymer 组件上都有实用函数 importHref(href, onLoad, onError)
。要动态导入和添加您的外部元素,您可以使用此代码:
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
});
关于javascript - 在 polymer 元素中动态创建 html 导入(版本 1.0),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30657159/