在 Angular 9 如何只允许 div 中的一个切换在给定时间处于活动状态？

Question

我在 div 中有三个开关，每个开关代表不同的主页视图。我如何在给定时间只允许一个切换处于活动状态，例如，当单击 myCalendar 切换时，myFavourites 和 myProjects 切换被关闭，假设其中一个处于活动状态。我发现许多带有 AngularJS 的 ngDisabled 解决方案，但 none 用于 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' 设置为您要显示的值。

有关详细信息，请参阅 angular 文档 :)

在 Angular 9 如何只允许 div 中的一个切换在给定时间处于活动状态？

In Angular 9 how to allow only one toggle in div to be active at a given time?

javascript

toggle

angular