更改角度组件内的活动引导程序选项卡 [英] Change active bootstrap tab inside angular component

问题描述

我一直被困在这个看似简单的问题上一段时间，通过 SO 解决方案来回解决似乎并不完全适合我的用例......我有一个 angular 组件，它有一个包含引导导航药丸的模板，这些只是在这个特定屏幕中用作选项卡.所以我有一个搜索选项卡和一个结果选项卡，在执行搜索后我想激活结果选项卡，但我不知道如何从组件挂钩到引导程序选项卡.

模板...

<ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#search" data-toggle="tab">Search</a><li class="nav-item"><a class="nav-link" href="#results" data-toggle="tab">结果</a><div class="tab-content"><div class="tab-pane active" id="search">搜索画面<button type="button" (click)="search()">搜索</button>
<div class="tab-pane active" id="results">结果屏幕</div>

然后组件就像..

@Component({选择器:应用演示"，templateUrl: './demo.component.html'})导出类 DemoComponent 实现 OnInit {@ViewChild('tabs') 标签；搜索() {//执行搜索.然后选择模板中的结果选项卡.//this.tabs.selectedIndex = ...}}

这可能吗?或者我是否需要使用组件中配置的不同风格的选项卡.非常感谢.

解决方案

使用 activeTab 跟踪哪个选项卡处于活动状态，并使用 ngClass 应用 .活动类

component.html

<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">搜索</a><li class="nav-item"><a class="nav-link" href="#results" [ngClass]="{'active':activeTab==='result'}" data-toggle="tab"(click)="result('result')">结果<div class="tab-content"><div class="tab-pane" id="search" [ngClass]="{'active':activeTab==='search'}">搜索画面<button type="button" (click)="search('result')">搜索</button>
<div class="tab-pane" id="results" [ngClass]="{'active':activeTab==='result'}">结果屏幕</div>

component.ts

 activeTab = 'search';搜索(活动标签){this.activeTab = activeTab;}结果(活动标签){this.activeTab = activeTab;}

Hi I have been stuck on what seems like this simple problem for a while going back and forth through SO solutions does not seem to fit my use case exactly... I have an angular component which has a template containing bootstrap nav pills, these are just being used as tabs within this particular screen. So I have a Search tab and a results tab and after performing a search I want to activate the results tab but I can't work out how to hook into the bootstrap tabs from the component.

The template ...

<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>

Then the component is like..

@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 = ...
  }

}

Is this possible? or do I need to be using a different flavour of tabs which are configured in the component. Many thanks in advance.

解决方案

Keep a track of which tab is active using activeTab and use ngClass to apply .active class

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;
  }

这篇关于更改角度组件内的活动引导程序选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！