问题描述
我正在使用 Aurelia 1 来构建我的应用程序。 现在,我正在创建一个工具栏自定义元素:custom-toolbar.ts。 此工具栏将包含 n 个子元素,称为:custom-toolbar-button.ts。
我的使用思路是这样的:
/*some view html*/
<template>
/*view stuff*/
<custom-toolbar>
<custom-toolabr-button title="button1" icon="btn1_ico" click.bind="buton1Clicked()"> </custom-toolbal-button>
<custom-toolabr-button title="button2" icon="btn2_ico" click.bind="buton2Clicked()"> </custom-toolbal-button>
...
</custom-toolbar>
</template>
现在,因为我希望这个自定义工具栏具有响应性并相应地安排(隐藏、缩小、在视口很小时显示“汉堡包”按钮,...)其按钮,它需要确切知道有多少个按钮它有和它们的宽度,所以我可以计算总宽度并在自定义工具栏中做一些排列逻辑。
父自定义工具栏自定义元素如何知道它的子元素(以便我可以枚举它们)然后读取每个组件宽度?或者我的子组件(按钮)将如何向父组件报告其宽度和自身?
请帮忙。
解决方法
Nvm,我找到了答案... 答案是像这样使用@children 属性:
import { customElement,children } from 'aurelia-framework';
@customElement('custom-toolbar')
@children({ name: 'buttons',selector: 'custom-toolbar-button' })
export class CustomToolbar {
buttons = [];
}
通过这段代码,我得到了使用我的自定义子元素正确填充的 button[] 集合。