Question

我是Polymer的新手，我最近遇到了一个问题。我动态创建了一定数量的我自己的Web组件实例，我希望能够从我的父组件中调用这些实例上的方法，但即使有答案，我也无法弄清楚如何做到这一点我在网上找到了。

这是我的父方法，我尝试调用children方法（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-if中），或者是动态生成的元素，就像你的情况一样。

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

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

Polymer 2.0无法从id获取孩子

1 个答案: