依赖于具有多个 true 的组件的 Aframe 组件

Question

我正在编写一个自定义组件，我想定义其他组件依赖项。

依赖项是不同的动画类型。 假设它们的名称为“animation__x”和“animation__y” x 和 y 可以是任何名称，所以我正在寻找类似动画的东西__* 或 /animation__\s*/

目前我完成这项工作的唯一方法是确保将我的组件放置在 HTML 上的动画组件之后，或者使用 this.el.updateComponents() 强制更新组件

这些解决方案都不适合我。

AFRAME.registerComponent('cool-component', {
    dependencies: ['animation'],
    update: functions(data){
       //detect available animations and do some stuff with them
       let animations = Object.keys(components).filter((key) => {
           return /(^animation__\w*)/.test(key);
       });
       //animations results in an empty array
    }
});

不工作的html

<a-scene cool-component animation__x="" animation__y="" animation__z=""></a-scene>

正在工作的 html（但它不好，因为我无法确保我的组件总是在列表中的最后一个

<a-scene animation__x="" animation__y="" animation__z="" cool-component></a-scene>

js 可以，但是感觉写不出来，因为我在使用实体内部函数

AFRAME.registerComponent('cool-component', {
    dependencies: ['animation'],
    update: functions(data){
       this.el.updateComponents(); //<-- I DONT LIKE THIS BUT IT WORKS
       //detect available animations and do some stuff with them
       //now all animations are available as this.el.components
       let animations = Object.keys(components).filter((key) => {
           return /(^animation__\w*)/.test(key);
       });
    }
});

Answer 1

三个选项：

取决于具体的组件名称：dependencies: ['animation__xxx']

让cool-component 设置那些动画：

AFRAME.registerComponent('cool-component', {
    init: functions(data){
       this.el.setAttribute('animation__xxx', {...});
    }
});

您也可以推迟cool-component 逻辑，直到实体已加载且所有组件已初始化：

init: function () {
  this.el.addEvenListener(‘loaded’, this.doStuffAferComponentsLoad.bind(this));
}

cool-component 试图完成的更多细节将有助于获得更准确的答案。