サイドバー/選択したサブメニューのみを表示するメニュー

Question

サイドバー/アコーディオンに似た複数の項目を表示するサイドバーを実装したいと思います。しかし、私は選択したサブメニューだけを表示したい。例えば、 - 私は3つのサブメニューがある場合、人物、ペット、アイテムと言うことができます。人物をクリックすると人物のみが表示され、ボタンは階層的に戻ります。ペットやアイテムは表示されません。彼らのヘッダーさえありません。そのようなコンポーネントはありますか？

Answer 1

正しく理解すれば、サブメニューを非表示にしてクリックして表示するだけです。したがって、たとえば：すべての他人のため

showPeople = false; 
showPets = false; 

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

などなど：

<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機能を必要としています。サブメニュー名はfalseに設定されているため、デフォルトでは表示されませんが、タイトルをクリックすると関数が実行され、クリックされたものが表示され、他のものは隠されます。

明らかに、これはあなたがペットと人の配列を持っていることを前提としています。