更改angular component内的活动引导选项卡
更改angular component内的活动引导选项卡
提问于 2018-06-29 23:55:30
嗨，我已经被这个看似简单的问题卡住了一段时间，来回折腾，所以解决方案似乎并不完全适合我的用例……我有一个angular组件，它有一个包含引导导航药丸的模板，这些只是用作这个特定屏幕中的选项卡。因此，我有一个搜索选项卡和一个结果选项卡，在执行搜索之后，我想激活结果选项卡，但我不知道如何从组件挂接到引导选项卡。
模板...
<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 = ...
}
}这个是可能的吗？或者我需要使用在组件中配置的不同风格的选项卡。在此之前，非常感谢您。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-30 01:20:18
使用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;
}Stack Overflow用户
发布于 2021-08-02 17:03:39
除了dasfdsa答案之外，要在angular中使用路由，还需要包括：
<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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51105507
复制相关文章
相似问题
腾讯云开发者
