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

Question

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

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

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

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

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 试图完成的工作的更多详细信息将有助于获得更准确的答案。

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

Aframe component with dependencies on component with multiple true

aframe