Question

我有一个其他组件引用的Polymer组件。类似的东西：

在index.html

<link rel="import" href="lib/polymer/polymer.html">
<link rel="import" href="component-one.html">

...

<component-one></component-one>

在component-one.html

<link rel="import" href="sub-component.html">
<dom-module id="component-one">
    <template>
        <sub-component></sub-component>
    </template>
    <script>Polymer({ is: 'component-one' });</script>
</dom-module>

在component-two.html

<link rel="import" href="sub-component.html">
<dom-module id="component-two">
    <template>
        <sub-component></sub-component>
    </template>
    <script>Polymer({ is: 'component-two' });</script>
</dom-module>

在sub-component.html

<dom-module id="sub-component">
    <template>blah blah blah</template>
    <script>Polymer({ is: 'sub-component' });</script>
</dom-module>

当我尝试在index.html中动态加载第二个组件时出现问题：

function importHref(href) {
    return new Promise((resolve, reject) => {
        Polymer.Base.importHref(href, function (e) {
            resolve(e.target);
        }, reject, true);
    });
}

...

await importHref('component-two.html');
// Now I can use <component-two>

这会引发异常：

未捕获DOMException：无法执行＆＃39; registerElement＆＃39; on＆＃39; Document＆＃39;：类型＆＃39;子组件＆＃39;的注册失败。具有该名称的类型已经注册。

我认为这是由于sub-component.html被两个组件引用而发生的，但两者都引用了大量纸张和铁元素，但没有一个引起此错误。

如何避免此异常？

Answer 1

问题是子组件路径中的拼写错误。

在component-one.html

<link rel="import" href="../components//sub-component.html">

在component-two.html

<link rel="import" href="../components/sub-component.html">

这两个成功路由（在IIS / Kestrel中）并返回sub-component.html，但是Polymer将其视为两个不同的URI，因此有两个不同的组件。

如果出现此错误，请仔细检查所有导入是否解析为相同的URI，而不仅仅是它们返回正确的内容。

聚合物错误＆＃34;具有该名称的类型已经注册＆＃34;使用Polymer.Base.importHref

1 个答案: