嗨,我一直困扰着这个简单的问题,一遍又一遍地通过SO解决方案似乎并不完全适合我的用例... 我有一个角度组件,其中有一个模板,其中包含引导导航药丸,这些药丸仅用作此特定屏幕中的标签。因此,我有一个“搜索”选项卡和一个“结果”选项卡,执行搜索后,我想激活“结果”选项卡,但无法弄清楚如何从组件中插入引导选项卡。
模板...
<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 = ...
}
}
这可能吗?还是我需要使用在组件中配置的其他选项卡。预先非常感谢。
答案 0 :(得分:6)
使用activeTab
跟踪哪个标签处于活动状态,并使用ngClass
来应用.active
类
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;
}
答案 1 :(得分:1)
除了 dasfdsa 答案之外,要与路由一起工作,还需要包括:
<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', $event)"
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', $event)">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', $event)">Search</button>
</div>
<div class="tab-pane" id="results" [ngClass]="{ 'active':activeTab==='result'}">results screen</div>
</div>
</div>
search(activeTab: string, $event: MouseEvent): void{
$event.preventDefault();
this.activeTab = activeTab;
}
result(activeTab: string, $event: MouseEvent): void{
$event.preventDefault();
this.activeTab = activeTab;
}