Question

我已经成功地用dart动态创建聚合物组件并添加到dom中。

但是现在我想这样做 WITHOUT 必须在编译时静态导入HTML模板。

在我的用例中，我有一个标识为myContainer的div容器和一个标签为my-tag的自定义Polymer Dart组件。

我试过了：

LinkElement e = new LinkElement('link');
e.rel = 'import';
e.href= 'my-tag.html';
document.head.children.add(e);

$['myContainer'].children.add(new Element.tag('my-tag'));

但最终会出现以下异常：

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. 
...

请注意，将聚合物元素添加到dom中时会出现异常，而不是在添加链接标记时。如果在编译时添加链接并注释在运行时添加链接的代码，则相同的代码也可以工作。

我还尝试了上面代码的几种不同变体，主要是在polymerInit之前或polymerInit().run(...)之内调用的单独方法中添加链接标记，但没有任何变化。

我想知道这个用例是否得到支持。

Answer 1

有可能创建一个这样做的变压器。变换器由pub build和pub serve执行，可以在构建过程中分析和修改代码。 dartlang.org/tools/pub/assets-and-transformers.html,dartlang.org/tools/pub/transformers

或

（我还没试过，但我认为它会起作用）
您可以创建一个HTML文件，其中包含您的包所需的所有导入，并且您的包的用户只需要导入这个文件。

Answer 2

尝试添加HeadElement：

 LinkElement e = new LinkElement();
 e.rel = 'import';
 e.href= 'my-tag.html';
 HeadElement h = new HeadElement();
 h.children.add(e);
 document.head.children.add(h);

在Dart Polymer中动态导入HTML模板

2 个答案: