我通过跟随一个教程博客链接创建了离子手风琴下拉菜单,该教程链接使用小部件创建手风琴下拉菜单,以下是该博客的链接。 http://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/
以下是我在github中上传的我的项目链接 https://stackblitz.com/github/dSaif/search-accordion
一切正常,但我希望切换下拉菜单(当我单击提供的图标打开其他任何下拉菜单时,打开下拉菜单需要自动关闭)
作为我的新手,我需要如何处理离子和角膜。
谢谢。
答案 0 :(得分:2)
设置方法是在文档中有一堆<app-accordion>
,例如:
<app-accordion></app-accordion>
<app-accordion></app-accordion>
<app-accordion></app-accordion>
<app-accordion></app-accordion>
<app-accordion></app-accordion>
<app-accordion></app-accordion>
它不知道邻居在做什么,但这不是必须的,因为最佳实践是将最底层的组件定义为尽可能“哑”。
您需要的是您已经拥有的@Input
的{{1}}属性。然后在父组件中保留一堆布尔符号,每个手风琴项都一个。
isMenuOpen
您应该将 <app-accordion
*ngFor="let technology of technologies; let i = index"
[isMenuOpen]="isMenuOpen[i].isOpen"
[name]="technology.name"
[description]="technology.description"
[image]="technology.image"
(change)="captureName($event)"></app-accordion>
重命名为app-accordion
,然后制作一个新的包装器组件app-accordion-item
来进行管理。
请注意,我还改进了设置输入变量的方式,使它们成为数据绑定的一种方法,而不是使用以前使用的插值方法。
我还添加了app-accordion
这是一个Angular功能,用于获取循环的索引,因此您可以在let i = index
数组中获取正确的项。
那么isMenuOpen
如何保持最新?嗯,您需要为手风琴项目编写另一个isMenuOpen
,以发出每个切换以及其索引和状态,然后可以更新@Output
数组。
所以这符合我们的初衷,因为底层的手风琴项目并不真正了解状态,它只是显示您从上方告诉它的打开或关闭状态,然后在它被切换时宣布,但是离开直到父手风琴组件的信息存储。