Question

我希望这是一个很好的问题，我不仅仅是错过了一些简单的事情。我是Angular 2的新手，我总是节省代码行和时间：）

我想更改我的标签的活动css类（我不想使用路由器！）我最终得到了类似的东西：

＆＃13;

activeTab: string;

switchActiveTab(newTab: string) {
  this.activeTab = newTab;
}

＆＃13;

<div class="buttonLine">
  <ul class="nav nav-pills">
    <li role="presentation" [ngClass]="{'active': activeTab === 'Example Tab 1'}" (click)="switchActiveTab('Example Tab 1');">
      <a>Example Tab 1</a>
    </li>
    <li role="presentation" [ngClass]="{'active': activeTab === 'Example Tab 2'}" (click)="switchActiveTab('Example Tab 2');">
      <a>Example Tab 2</a>
    </li>
  </ul>
</div>

＆＃13;

所以我必须声明字符串值＆＃34;示例标签1＆＃34;我的HTML中有三次。这非常烦人，特别是当我在这里有5个或更多标签时。

是否可以避免重新表达表达式＆＃34;示例选项卡1＆＃34;我的HTML中有三次？或者是否可以以更优雅的方式做这种事情？

Answer 1

方法1

要简化模板代码，您可以在组件类中声明选项卡列表：

public tabList: Array<string> = ["Example Tab 1", "Example Tab 2"];

并使用li指令生成*ngFor元素：

<li *ngFor="let tab of tabList" [ngClass]="{'active': activeTab === tab}" (click)="switchActiveTab(tab);" role="presentation">
  <a>{{tab}}</a>
</li>

方法2

为了使代码更具说明性，每个项目都可以使用template reference variable引用自己，而不是使用标签标题（如this plunker中所示）：

<div class="buttonLine">
  <ul class="nav nav-pills">
    <li #tab1 [ngClass]="{'active': activeTab === tab1}" (click)="switchActiveTab(tab1);" role="presentation">
      <a>Example Tab 1</a>
    </li>
    <li #tab2 [ngClass]="{'active': activeTab === tab2}" (click)="switchActiveTab(tab2);" role="presentation">
      <a>Example Tab 2</a>
    </li>
  </ul>
</div>

代码将相应修改：

activeTab: HTMLElement;

switchActiveTab(newTab: HTMLElement) {
  this.activeTab = newTab;
}

更改点击项的类别时，避免在Angular 2中编写多个变量值

1 个答案: