В Angular 9 как разрешить активировать только один переключатель в div в данный момент? - PullRequest
Новая
       51

В Angular 9 как разрешить активировать только один переключатель в div в данный момент?

1 голос
/ 20 марта 2020

У меня есть три переключателя в div, каждый из которых представляет отдельный вид домашней страницы. Как разрешить активировать только один переключатель в данный момент времени, например, при нажатии переключателя myCalendar переключатели myFavourites и myProjects отключаются, если предположить, что один из них активен. Я нашел много решений с ngDisabled с AngularJS, но ни одного для 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();
  }

1 Ответ

1 голос
/ 20 марта 2020

Go для 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 документы для дальнейшей информации:)

...