Question

我有一些列表项在我的UI中被视为选项卡。我在每个标签下都有一个“下一个”按钮，最后一个标签有一个“完成”按钮。当我点击“下一步”按钮时，我需要移动到下一个标签。我正在开发一个带有打字稿版本2.3.4的Angular2项目。所以我需要一些打字代码来处理按钮点击。在搜索时，我得到了一些jquery代码，来自how to display next bootstrap tab on button click的$('.nav-tabs > .active').next('li').find('a')。我在我的按钮单击（.ts文件）中尝试了它，它的工作原理！但我不确定在我的项目中使用jquery。是否可以在其typescript文件中获取元素（html）？或者这是可行的方法吗？我的清单就像，

<div class="row">
            <ul class="nav nav-tabs bg-white">
              <li class="active"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
              <li id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
              <li id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
</ul>
</div>

提前致谢！

Answer 1

我会做这样的事情

<强> page.ts

//declare 3 variables
isT1Active:boolean = true;
isT2Active:boolean = false;
isT3Active:boolean = false;
...
activate(elem){
  //deactivate all first
  this.isT1Active = false;
  this.isT2Active = false;
  this.isT3Active = false;

  switch(elem){
    case 't1':{this.isT1Active = true;break;}
    case 't2':{this.isT2Active = true;break;}
    case 't3':{this.isT3Active = true;break;}
  }
}

<强> page.html中

<div class="row">
  <ul class="nav nav-tabs bg-white">
     <li [ngClass]="{'active': isT1Active}" (click)="activate("t1")"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
     <li  [ngClass]="{'active': isT2Active}" (click)="activate("t2")" id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
     <li  [ngClass]="{'active': isT3Active}" (click)="activate("t3")" id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
  </ul>
</div>

你可以对next button做同样的事情，假设每个标签都有下一个按钮

Answer 2

我会远离jQuery，而是学习如何更好地使用Angular来控制视图。基本上，您希望模板选项卡中的active类绑定到组件选定模型，以便在更新所选模型时，Angular会自动将active类应用于匹配选项卡。 / p>

在您的组件中，定义存储选项卡信息的数组，并定义引用应该处于活动状态的特定选项卡的selectedTab：

export class AppComponent  {
  tabs = [
    {id:'idBasicInfo', href:'...',label:'BasicInfo'},
    {id:'idAddInfo', href:'...',label:'AdditionalInfo'},
    {id:'idPlayerIdentity',href:'...',label:'PlayerIdentity'}
  ];
  selectedTab = this.tabs[0]; // which is active by default
}

然后在您的模板中，使用这些属性来驱动视图：

<ul>
  <li *ngFor="let t of tabs" [id]="t.id" [class.active]="t===selectedTab">
    <a data-toggle="tab" [href]="t.href" (click)="selectedTab=t"> {t.label}} </a>
  </li>
</ul>

点击标签后，系统会设置selectedTab并设置其active课程。

如何更改打字稿中的活动列表项

2 个答案: