Polymer 2.0 无法从 id 获取孩子

Question

我对 Polymer 有点陌生，最近遇到了问题。我动态创建了我的 Web 组件的一定数量的实例，我希望能够从我的父组件调用这些实例的方法，但即使有答案我也不知道该怎么做我在网上找到的。

这是我尝试调用子方法的父方法（e.detail.id 与我要访问的孩子的特定实例的 id 匹配）：

childObj: function(e) {
     var name = "selectObj"+e.detail.id;
     this.$.name.hello();
},

还有我孩子的基本方法：

hello: function() {
     console.log("hello");
}

名称获得的 ID 存在，但我仍然收到此错误

TypeError: Polymer.dom(...).querySelector(...) is null

我也尝试将this.$.name.hello() 替换为this.$$('#selectObj'+e.detail.id)，但仍然出现同样的错误。

以下是我创建子元素的方法：

newObj: function() {
            var dynamicSelect = document.createElement("pbd-object-select");
            dynamicSelect.num = this.nbObj;
            var newId = "selectObj" + this.nbObj;
            dynamicSelect.id = newId;  
            Polymer.dom(this.root).querySelector("#listeObjet").appendChild(dynamicSelect);
        },

Answer 1

您尝试查询该元素的方式存在两个问题。其中之一是通过这样做：

this.$.name.hello();

您基本上是在寻找一个 id 为“name”的元素，而不是一个 id 等于变量 name 的元素。比如：

this.$[name].hello();

总体上可能会更好，但在您的特定情况下仍然会有一些问题。 this.$ 只是通过 ID 轻松获取元素的“快捷方式”，但是，它只是一个对象，其中引用了元素连接时存在并具有 id 的元素。因此，它不适用于有条件包含的元素（例如在 dom-ifs 中）或动态生成的元素，例如您的情况。

您可以只使用 getElementById 方法，就像在普通 JS 中一样，请记住您是在元素中查询，而不是在 document 中查询。所以它会是这样的：

this.shadowRoot.getElementById("selectObj"+e.detail.id).hello()