1つの親をクリックすると、すべての親が子をレンダリングし、hideと同様に表示されます。私は角2に新しいです。お勧めします。角のある非表示の非表示
は、だから私は、次のコンポーネント
import { Component, Input } from '@angular/core';
@Component({
selector: 'sidebar-cmp',
templateUrl: 'sidebar.html',
styleUrls: [
'sidebar.scss'
]
})
export class SidebarComponent {
@Input() tenants = 0;
showMenu: string = '';
addExpandClass(element: any) {
if (element === this.showMenu) {
this.showMenu = '0';
} else {
this.showMenu = element;
}
}
}
対応するHTMLを持っているあなたは、変数ではない文字列を渡し、ここのように見えている
<nav class="sidebar">
<ul class="list-group" *ngFor="let tenant of tenants ;trackBy: trackId">
<div class="nested-menu">
<a class="list-group-item" (click)="addExpandClass('tenant.id')">
<span><i class="fa fa-th-list"></i> {{tenant.name}}</span>
</a>
<li class="nested" [ngClass]="{'expand' : showMenu === 'tenant.id' }">
<ul class="submenu">
<li>
<a href><span>Submenu</span></a>
</li>
<li>
<a href><span>Submenu</span></a>
</li>
</ul>
</li>
</div>
</ul>
</nav>
あなたは[アコーディオンメニュー](http://bootsnipp.com/snippets/featured/accordion-menu)のようなものを意味しました? 一度に開くメニューは1つだけです。 –