代码之家 › 专栏 › 技术社区 › jonesy

更改角度组件内的活动引导选项卡

bootstrap-4 angular

jonesy · 技术社区 · 6 年前

嗨,我已经被这个看起来很简单的问题困扰了一段时间,所以解决方案似乎并不完全适合我的用例… 我有一个角度组件,它有一个包含引导导航药丸的模板,这些只是作为这个特定屏幕中的标签使用。因此,我有一个搜索选项卡和一个结果选项卡,在执行搜索之后,我想激活结果选项卡,但我不知道如何从组件钩住引导选项卡。

模板…

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

那么这个组件就像..

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

}

这可能吗?或者我需要使用组件中配置的不同风格的选项卡。多谢提前。

1 回复 | 直到 6 年前

Sandeep Gupta 6 年前

使用跟踪哪个选项卡处于活动状态 activeTab 使用 ngClass 申请 .active 班

组件.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>

组件.ts

  activeTab = 'search';

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

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

推荐文章

seriously · 按钮中元素的对齐

3 年前

USK · 引导模型在我的HTML文件中不起作用

3 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

user9644796 · 如何检查折叠的导航栏是否打开?

7 年前

JoeSlav · 使用引导上载损坏的文件

7 年前

John · 引导程序4,表单内联未在XS视图上对齐

7 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

7 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

7 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

7 年前