web-dev-qa-db-fra.com

Modifier l'onglet bootstrap à l'intérieur angular

Salut, je suis resté coincé sur ce qui semble être ce problème simple pendant un certain temps en faisant des allers-retours à travers SO ne semblent pas correspondre exactement à mon cas d'utilisation ... J'ai un angular composant qui a un modèle contenant bootstrap nav pills, ceux-ci sont juste utilisés comme des onglets dans cet écran particulier. J'ai donc un onglet Rechercher et un onglet de résultats et après avoir effectué une recherche Je veux activer l'onglet des résultats mais je ne peux pas trouver comment me connecter aux onglets bootstrap du composant).

Le gabarit ...

<div id="tabs" #tabs>

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#search" data-toggle="tab">Search</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#results" data-toggle="tab">Results</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="search">
      search screen 
      <button type="button" (click)="search()">Search</button>
    </div>
    <div class="tab-pane active" id="results">results screen</div>
  </div>

</div>

Ensuite, le composant est comme ..

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit {

  @ViewChild('tabs') tabs; 

  search() {
    //perform search. then select the results tab in template.
    //this.tabs.selectedIndex = ...
  }

}

Est-ce possible? ou dois-je utiliser une autre saveur d'onglets configurés dans le composant. Merci d'avance.

angularbootstrap-4
5
jonesy

Gardez une trace de l'onglet actif en utilisant activeTab et utilisez ngClass pour appliquer .active classe

component.html

<div id="tabs" #tabs>

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#search" [ngClass]="{ 'active':activeTab==='search'}" (click)="search('search')"
         data-toggle="tab">Search</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#results" [ngClass]="{ 'active':activeTab==='result'}" data-toggle="tab"
         (click)="result('result')">Results</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane" id="search" [ngClass]="{ 'active':activeTab==='search'}">
      search screen
      <button type="button" (click)="search('result')">Search</button>
    </div>
    <div class="tab-pane" id="results" [ngClass]="{ 'active':activeTab==='result'}">results screen</div>
  </div>

</div>

component.ts

  activeTab = 'search';

  search(activeTab){
    this.activeTab = activeTab;
  }

  result(activeTab){
    this.activeTab = activeTab;
  }
11
dasfdsa