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

【问题标题】：Aurelia: how to access child elements from parent elementAurelia：如何从父元素访问子元素
【发布时间】：2021-06-09 11:49:31
【问题描述】：

我正在使用 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>

现在，因为我希望这个自定义工具栏具有响应性并相应地安排（隐藏、缩小、在视口较小时显示“汉堡包”按钮......）它的按钮，所以它需要确切知道有多少按钮它有，它们的宽度，所以我可以计算总宽度并在自定义工具栏中做一些排列逻辑。

父自定义工具栏自定义元素如何知道它的子元素（以便我可以枚举它们）然后读取每个组件的宽度？或者我的子组件（按钮）将如何向父组件报告其宽度和自身？

请帮忙。

【问题讨论】：

标签： typescript controls aurelia composition

【解决方案1】：

Nvm，我找到了答案…… 答案是像这样使用@children 属性：

import { customElement, children } from 'aurelia-framework';

@customElement('custom-toolbar')
@children({ name: 'buttons', selector: 'custom-toolbar-button' })
export class CustomToolbar {
   buttons = [];           
}

使用此代码，我可以使用我的自定义子元素正确填充按钮 [] 集合。

【讨论】：