Question

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

依赖关系是不同的动画类型。假设它们的名称为“ animation__x”和“ animation__y” x和y可以是任何名称，因此我正在寻找类似animation __ *的名称或/ 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正在尝试实现的更多详细信息将有助于获得更精确的答案。

依赖于具有多个true

1 个答案: