从A-Frame中的另一个组件访问动态创建的子代

Question

我目前有2个组件。 其中一个创建了一系列十二面体，而另一个使它们不可见。 它们都在运行时生成。

问题在于看不见的那个。 我无法使用以下方法来获取动态生成的子代：

el.querySelector('*')

在不可见组件的init方法中。

我什至尝试过：

• 侦听“已加载”事件，然后注册组件。
• 使用Promise并监听已加载的事件。
• 注册组件后3秒钟使用window.setTimeout（）函数。

到目前为止，这是我的完整代码：

export class InvisibleComponent {
  constructor() {
    /**
     * Sets the current element and all of its children as invisible
     * by using its materials property.
     * 
     */
    const _this = this;
    AFRAME.registerComponent('invisible', {
      init: function () {
        _this.setTransparent(this.el);
        console.log(this.el);
        let children = this.el.querySelector('*');
        if (!children) return;
        Array.from(children).forEach(child => {
          _this.setTransparent(this.el);
        })
      },
      remove: function () {
        if (!this.el) return;
        _this.setOpaque(this.el);
        let children = this.el.querySelector('*');
        if (!children) return;
        Array.from(children).forEach(child => {
          _this.setOpaque(this.el);
        })
      }
    })
  }
  setTransparent(el: AFrame.Entity) {

    this.getMaterial(el).then((material :any) => {
      this.setAttributes(el,material.opacity);
    })
    .catch(resolve => {
      console.log("Material couldn't be gathered. Using 100% of opacity instead", resolve);
      this.setAttributes(el, 1);
    });
  }

  setAttributes(el : AFrame.Entity, opacity){
    el.setAttribute('data-previous-opacity',opacity);
    el.setAttribute('material', 'opacity:0; transparent: true; visible:false;');
  }

  /**
   * This is a solution if the element which is trying to load 
   * hasn't been loaded yet. All elements must have a material
   * in order to be inserted in a scene.
   * @param el 
   */
  getMaterial(el: AFrame.Entity): Promise<number> {
    return new Promise<number>((resolve, reject) => {
      let material = el.getAttribute('material');
      if (material) resolve(material);

      el.sceneEl.addEventListener('loaded', function () {
        let material = el.getAttribute('material');
        !material ? reject(undefined) : resolve(material);
      })


    });
  }

  // If you had previous property, this will not remove them.
  setOpaque(el: AFrame.Entity) {
    let dataPreviousOpacity = el.getAttribute('data-previous-opacity');
    if (!dataPreviousOpacity) dataPreviousOpacity = 1;
    el.setAttribute('material', 'transparent', dataPreviousOpacity === 1 ? false : true);
    el.setAttribute('material', 'opacity', dataPreviousOpacity);
    el.setAttribute('material', 'visible', true);

  }
}

Answer 1

由于某些原因，我无法使其与寻找实体子代一起使用。
这是我的方法：

1. 公开创建的元素：

    init:function(){ //expose the object: this.object = document.createElement('a-dode(..)') } 

2. 使用el.components.componentName.object访问对象

它可以是对象的公共数组，但是您喜欢。 访问undefined对象似乎没有问题。 如果有的话，您可以进行间隔检查对象是否未定义，或遍历数组，对每个“未定义”元素执行“设置不可见”。

这里的工作是摆弄：组件“ create”创建一个框，“ change_color”设置color + position。 还有一个getObject（）函数，稍后再讨论，因为我的方法存在严重的安全性问题，可能需要为该对象使用适当的吸气剂。

---

我不确定提到的“安全问题”的正确方法是什么，但是我设法通过使用bind();将对象传递给getter来制作一个“ getter” bind(); ：

 init: function(){ object = (...); this.getObject = this.getObject.bind(this,[object]); }, getObject(){ return arguments[0]; } 

如果这太可怕了，应该以其他方式解决，请告诉我。
也许我应该使用get getterName（）{// getterBody} ，但这会引发一些错误。
更新小提琴这里 。