NgSwitch - Как отключить другие кнопки, нажав на кнопку - PullRequest
1 голос
/ 20 апреля 2020

Я написал небольшое меню, которое состоит из трех кнопок. Если вы нажмете кнопку, соответствующий компонент будет открыт. При нажатии на кнопку значок меняется на 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...