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

Я использую набор вкладок из 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();
    ...
  }

angular ngx-bootstrap twitter-bootstrap-3
person Jojje    schedule 11.02.2019    source источник
comment
Я думаю, что ввод destroyOnHide для tabset может быть тем, что вы ищете.   -  person The Head Rush    schedule 11.02.2019
comment
хм, я пробовал [destroyOnHide] = false, но получаю: Невозможно выполнить привязку к 'destroyOnHide', так как это не известное свойство 'tabset   -  person Jojje    schedule 11.02.2019
comment
По какой-то причине я подумал, что вы используете ng-bootstrap, который предлагает для этого нестандартное решение.   -  person The Head Rush    schedule 11.02.2019

Ответы (2)


arrow_upward
0
arrow_downward

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

person User 5842    schedule 11.02.2019

arrow_upward
0
arrow_downward

В этих случаях я обычно использую какой-либо флаг, обычно в сервисе, который я внедряю, который сохраняет выбранный параметр. Затем я устанавливаю «активный» класс с помощью 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();
    ...
}

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

person shinsnake    schedule 11.02.2019