Запомнить выбранную вкладку (вкладка начальной загрузки) в Angular 5

Question

Я использую tabset из Bootstrap (ngx-bootstrap.es2015.js) в приложении Angular 5.Работает нормально по большей части.Однако, когда отображается другой компонент (а компонент, показывающий набор вкладок, скрыт), а затем вы возвращаетесь к компоненту, отображающему набор вкладок, набор вкладок всегда показывает первую выбранную вкладку (даже если, возможно, была выбрана третья).Есть ли способ «запомнить», какая вкладка была активной при возврате к «первому» компоненту?

Какой-то код:

<tabset type="pills" [justified]="true" *ngIf="someCondition ">
      <tab *ngFor="let category of categories"
           heading="{{category.categoryNumber}} {{category.categoryName}}"
           (select)=setCategory(category.categoryNumber)>
      </tab>
    </tabset>

setCategory(categoryNumber) {
    this.currentCategory = categoryNumber;
    this._ref.detectChanges();
    ...
  }

Answer 1

В этих случаях я обычно использую какой-либо флаг, обычно на сервисе, который я внедряю, который сохраняет выбранную опцию.Затем я установил «активный» класс, используя ngClass, основываясь на значении сервиса.Итак, что-то вроде этого:

<tabset type="pills" [justified]="true" *ngIf="someCondition ">
  <tab *ngFor="let category of categories"
       heading="{{category.categoryNumber}} {{category.categoryName}}"
       [ngClass]="{ 'active' : category.categoryNumber === someSvc.selectedCategoryNumber }"
       (select)=setCategory(category.categoryNumber)>
  </tab>
</tabset>

constructor(private someSvc: MySomeService) { }

setCategory(categoryNumber) {
    this.someSvc.selectedCategoryNumber = categoryNumber;
    this.currentCategory = categoryNumber;
    this._ref.detectChanges();
    ...
}

Я уверен, что есть более элегантный способ, и, надеюсь, кто-то придет, чтобы показать это нам обоим, но это всегда работало достаточно хорошо для меня, так какЯ почти всегда внедряю какую-то услугу почти каждому компоненту.

Answer 2

Вам нужно будет включить какое-то состояние в ваше приложение, чтобы оно запомнило какой-то фрагмент данных.В прошлом я использовал эту ссылку, чтобы узнать больше о создании такого состояния внутри моих приложений Angular.