Я написал небольшое меню, которое состоит из трех кнопок. Если вы нажмете кнопку, соответствующий компонент будет открыт. При нажатии на кнопку значок меняется на x (используется для скрытия компонента). Теперь я хотел бы, чтобы я нажимал на кнопку, остальные две должны быть отключены, и если я скрываю кнопку со значком x, кнопки должны быть снова включены. Вы знаете, как это сделать?
Мой код:
// Template
<div class="externalArea" [ngSwitch]="viewMode">
<app-import (currentImport)="setCurrentImport($event)" *ngSwitchCase="'showImport'"></app-import>
<app-export (currentExport)="setCurrentExport($event)" *ngSwitchCase="'showExport'"></app-export>
<app-calculatory-bookings (currentCalculatoryBookings)="setCurrentCalculatoryBookings($event)" *ngSwitchCase="'showCalculatoryBookings'"></app-calculatory-bookings>
</div>
<button type="button" [class.active]="viewMode=='showCalculatoryBookings'" (click)="toggleCalculatoryBookings()">
<i class="fas fa-calculator" *ngIf="!(show)" matTooltip="Kalkulatorische Buchungen"></i>
<i class="fas fa-times" (click)="cancelCalculatoryBookings()" *ngIf="show" matTooltip="Beenden"></i>
</button>
<button type="button" [class.active]="viewMode=='showImport'" (click)="toggleImport()">
<i class="fas fa-upload" *ngIf="!(show1)" matTooltip="SuSa importieren" ></i>
<i class="fas fa-times" (click)="cancelImport()" *ngIf="show1" matTooltip="Beenden"></i>
</button>
<button type="button" [class.active]="viewMode=='showExport'" (click)="toggleExport()">
<i class="fas fa-download" *ngIf="!(show2)" matTooltip="SuSa exportieren"></i>
<i class="fas fa-times" (click)="cancelExport()" *ngIf="show2" matTooltip="Beenden"></i>
</button>
// TS
toggleImport() {
this.viewMode = 'showImport';
this.show1 = !this.show1;
this.isDisabled = true;
}
toggleExport() {
this.viewMode = 'showExport';
this.show2 = !this.show2;
this.isDisabled = true;
}
toggleCalculatoryBookings() {
this.viewMode = 'showCalculatoryBookings';
this.show = !this.show;
this.isDisabled = true;
}
cancelImport() {
this.viewMode = '';
this.show1 = false;
}
cancelExport() {
this.viewMode = '';
this.show2 = false;
}
cancelCalculatoryBookings() {
this.viewMode = '';
this.show = false;
}