Aurelia：如何从父元素访问子元素

如何解决Aurelia：如何从父元素访问子元素

我正在使用 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[] 集合。