Question

我在angular2中使用了bootstrap3.3的标签功能。在我的模板中，我有以下标签：

export class myComponent implements OnInit{
  @ViewChild('tab2') tab2: TabsetComponent; //I tried with ElementRef as well
  public switchtab() {
    console.log(this.tab2);  // Here I am getting "undefined" as output
}

在组件中，我尝试使用几种不同的方式访问

使用@viewchild

public switchtab() {
  console.log(document.getElementById('tab2');
  document.getElementById('tab2').class = "tab-pane active in"; //no error
  document.getElementById('tab1').class = "tab-pane fade"; //no error
}

使用document.getElementById
```
fetchmany
```

这两种方法都没有使tab2成为活动状态。不确定如何激活tab2。

Answer 1

更改此

</div id="tab2" class="tab-pane fade">
     <h3>content for tab2</h3>
</div>

到此

<div id="tab2" class="tab-pane fade">
      <h3>content for tab2</h3>
</div>

未定义，因为你没有在视图中注册它，

<div class="col-lg-8 col-md-8 col-sm-8">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="tab1">Tab1 Heading</a><li>
    <li><a data-toggle="tab" href="tab2">Tab2 Heading</a><li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active in">
      <h3>content for tab1</h3>
    </div>
    <div id="tab2" class="tab-pane fade" #tab2>
      <h3>content for tab2</h3>
    </div>
  </div>
</div>
<button type="submit" class="btn btn-primary" (click)="switchtab()"> Tab selection</button>

Answer 2

我现在已经解决了这个问题。我添加了id =＆＃39; tabhead1＆＃39;和id =＆＃39; tabhead2＆＃39;对于nav-tabs中的li元素（这些是制表符标题）。 tab-content已经有id值。所以，它看起来像这样：

<div class="col-lg-8 col-md-8 col-sm-8">
  <ul class="nav nav-tabs">
    <li id="tab1head" class="active"><a data-toggle="tab" href="tab1">Tab1 Heading</a><li>
    <li id="tab2head"><a data-toggle="tab" href="tab2">Tab2 Heading</a><li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active in">
      <h3>content for tab1</h3>
    </div>
    <div id="tab2" class="tab-pane fade">
      <h3>content for tab2</h3>
    </div>
  </div>
</div>
<button type="submit" class="btn btn-primary" (click)="switchtab()"> Tab selection</button>

在组件旁边：

switchtab() {
  document.getElementById("tab1head").class="";
  document.getElementById("tab2head").class="active";
  document.getElementById("tab1").class="tab-pane fade";
  document.getElementById("tab2").class="tab-pane active in";
}

这可以从tab1切换到tab2。这可以进一步增强，以在标签之间切换。

基于按钮单击控制angular2到组件中的活动引导选项卡

2 个答案: