Question

我通过跟随一个教程博客链接创建了离子手风琴下拉菜单，该教程链接使用小部件创建手风琴下拉菜单，以下是该博客的链接。 http://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/

以下是我在github中上传的我的项目链接 https://stackblitz.com/github/dSaif/search-accordion

一切正常，但我希望切换下拉菜单（当我单击提供的图标打开其他任何下拉菜单时，打开下拉菜单需要自动关闭）

作为我的新手，我需要如何处理离子和角膜。

谢谢。

Answer 1

设置方法是在文档中有一堆<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数组。

所以这符合我们的初衷，因为底层的手风琴项目并不真正了解状态，它只是显示您从上方告诉它的打开或关闭状态，然后在它被切换时宣布，但是离开直到父手风琴组件的信息存储。

离子手风琴下拉菜单打开和关闭

1 个答案: