Как активировать вкладку Bootstrap и открыть содержимое вкладки программно с помощью Angular - PullRequest
Новая
       6

Как активировать вкладку Bootstrap и открыть содержимое вкладки программно с помощью Angular

0 голосов
/ 05 февраля 2019

Я просто перенаправил на страницу профиля с фрагментом маршрутизатора (/ profile # избранное), где избранное - это вкладка Bootstrap.По умолчанию первая вкладка активна, а в моем случае это любимая вкладка 2, в которой я хочу программно активировать повторное извлечение имени фрагмента из URL.

Я получил фрагмент из URL с помощью: 

this.activatedRoute.fragment.subscribe(fragment => {
  console.log('fragment : ', fragment);
});

Моя структура вкладок: 

<ul class="nav nav-tabs">
    <li class="active"> <a data-toggle="tab" href="#myPets"> My Pets</a> </li>
    <li><a data-toggle="tab" href="#favorites">Favorites</a></li>
    <li *ngIf="!userDetails?.isSocialSiteUser">
    <a data-toggle="tab" href="#changePassword">Change Password</a>
    </li>
    <!-- <li><a data-toggle="tab" href="#account"> Account</a></li> -->
    <li> <a data-toggle="tab" href="#meets">Upcoming Meet and Greets</a> </li>
    <li> <a data-toggle="tab" href="#myDeals" *ngIf="myDeals.length">My Deals</a> </li>
</ul>

<div class="tab-content">
    <div id="myPets" class="tab-pane overflow-y-500-x-hide fade in active" #myPets>
    ...
    </div>

    <div id="favorites" class="overflow-y-500-x-hide tab-pane fade" #favorites>
    <sfl-profile-favorites></sfl-profile-favorites>
    </div>

    ...

</div>

Теперь я не знаю, как активировать вкладку «Избранное».Может быть, этого можно достичь, переключив класс in active, но как я могу удалить его со всех других вкладок и добавить в конкретную вкладку?

1 Ответ

0 голосов
/ 05 февраля 2019

Вы можете сохранить фрагмент и применить active условие класса в файле шаблона 

this.activatedRoute.fragment.subscribe(fragment => {
  this.currentFragment = fragment //store somewhere
});

В файле шаблона [ngClass]="{'class': true}"

<li [ngClass]="{'active': currentFragment === '/profile#myPets'}">
    <a data-toggle="tab" href="#myPets"> My Pets</a> </li>

<li [ngClass]="{'active': currentFragment === '/profile#favorites'}">
    <a data-toggle="tab" href="#favorites">Favorites</a></li>

<div id="favorites" class="overflow-y-500-x-hide tab-pane fade" 
    [ngClass]="{'active': currentFragment === '/profile#favorites'}"
     #favorites>.....</div>
...