在 Angular 9 中，如何在給定時間只允許 div 中的一個切換處於活動狀態？

Question

我在一個 div 中有三個切換，每個切換代表一個不同的主頁視圖。 我如何在給定時間只允許一個切換處於活動狀態，例如，當單擊 myCalendar 切換時，myFavourites 和 myProjects 切換被關閉，假設其中一個處於活動狀態。 我在 AngularJS 中找到了許多 ngDisabled 解決方案，但在 Angular 9 中沒有。

<div class="float-left d-flex align-items-center">    
    <span class="mx-2">
        <or-toggle-button id="myCalender" (changed)="updateFavouriteList()" [(ngModel)]="settings.myCalender" icon="fas fa-calendar-week fa-2x" iconTooltip="My Favourites"></or-toggle-button>
        <or-toggle-button id="myFavourites" (changed)="updateFavouriteList()" [(ngModel)]="settings.myFavourites" icon="far fa-star fa-2x" iconTooltip="My Favourites"></or-toggle-button>               
        <or-toggle-button id="myProjects" (changed)="updateProjectList()" [(ngModel)]="settings.myProjects" icon="fa-user fa-2x" iconTooltip="My Projects"></or-toggle-button>
      </span>              
    </div>

例如功能之一

updateFavouriteList() {
    if (this.settings.myFavourites) {
    // READ FROM MODEL IF FAVOURITE TOGGLE IS ACTIVE/INACTIVE
    this.projects = this.fulllist.filter(
        e => e.isFavourite === false
        );
        } else {
        this.projects = this.fulllist;
     }
    this.saveViewSettings();
  }

Answer 1

去 ngSwitch

<container-element [ngSwitch]="currentPage">
  <some-element *ngSwitchCase="page1">...</some-element>
  <some-element *ngSwitchCase="page2">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element>
</container-element>

然后在組件中創建一些函數，將 'this.currentPage' 設置為您想要顯示的那個。

有關更多信息，請參閱角度文檔:)