Изменить активную вкладку начальной загрузки внутри углового компонента

Question

Привет, я застрял на том, что кажется, что эта простая проблема какое-то время, переходя назад и вперед через 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 = ...
  }

}

Возможно ли это? или мне нужно использовать другой вид вкладок, которые настроены в компоненте. Большое спасибо заранее.

Answer 1

Следите за тем, какая вкладка активна, используя activeTab и используйте ngClass, чтобы применить .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;
  }