Question

我想实现侧栏，它显示了与手风琴类似的多个项目。但是，我希望它只显示选定的子菜单。例如 - 如果我有3个子菜单，让我们说人，宠物，物品，如果我点击人物，它将只显示人物和按钮以进行等级回复。它不会显示Pets或Items。甚至不是他们的标题。有这样的组件吗？

Answer 1

如果我理解正确，您只需要隐藏子菜单并在点击时显示它们。所以，例如：

<div (click)="showSubmenu('people')">People</div>
<div *ngIf="showPeople" *ngFor="let person in people">
  <div>{{ person }}</div>
</div>
<div (click)="showSubmenu('pets')">Pets</div>
<div *ngIf="showPets" *ngFor="let pet in pets">
  <div>{{ pet }}</div>
</div>
....

然后在你的组件中你需要showSubmenu函数：

showPeople = false;
showPets = false;

showSubmenu(menu){
  if (menu === 'people') {
    this.showPeople = true;
    this.showPets = false;
    ....
  } else if (menu === 'pets') {
    ...
  ....
}

等等所有其他人。我们已将子菜单名称设置为false，因此默认情况下它们不会显示，但是当我们单击标题时，该函数会运行并显示我们单击的那个，隐藏其他名称。

显然，这假设你有一个宠物和人阵。

侧栏/菜单仅显示选定的子菜单

1 个答案: