在 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' 设置为您想要显示的那个。

有关更多信息，请参阅角度文档:)