Angular2/Typescript 切换 CSS class 打开和关闭（模拟单选按钮）

Question

我在视图中有一系列 UL 元素和对应的 LI 元素。它们一起都需要像单选按钮组一样发挥作用（一组中的所有 9 个锚点），这意味着一次只能 "clicked" （当单击另一个时，前一个 selected 是 "unclicked").这些锚点（在 LI 中）将负责 md-sidenav 中的路由，可以隐藏或显示，因此单击的 class 需要持续存在，直到单击其他内容以给用户提示至于他们在哪里。

Plunker

我是 Angular2 和 Typescript 的新手，所以我不确定我是否缺少某种方便的 Angular 功能可以帮我解决这个问题。在 jQuery/JS 中，我会向所有锚点添加一个 class，这样我就可以轻松地一次性 select 它们，当点击一个新的锚点时，我会首先使用 . removeClass() 从所有锚点中删除点击的 class （这是矫枉过正，但它会清除被点击的那个），然后我会使用 .addClass('.anchorClicked') 添加点击的 class 到目标锚点。 Angular的[routerLink]可以处理路由部分。

如您所见，我的标记在某种程度上支持我想到的 jQuery 解决方案。这主要是因为我找不到使用 Typescript 显式删除 CSS class 的方法。我知道我可以使用 [style.color]= blah 并使用插值控制样式，但我不想为每个锚点和每个样式规则存储样式值。必须有一个简单的方法来做到这一点！

<md-sidenav #start mode="over" class="sideDrawer">
  <ul>
    <li><a href="#" class="anchor" id="a11" (click)="sideNavAlert($event)">anchor 1.1</a></li>
    <li><a href="#" class="anchor" id="a12" (click)="sideNavAlert($event)">anchor 1.2</a></li>
    <li><a href="#" class="anchor" id="a13" (click)="sideNavAlert($event)">anchor 1.3</a></li>
  </ul>
  <ul>
    <li><a href="#" class="anchor" id="a21" (click)="sideNavAlert($event)">anchor 2.1</a></li>
    <li><a href="#" class="anchor" id="a22" (click)="sideNavAlert($event)">anchor 2.2</a></li>
    <li><a href="#" class="anchor" id="a23" (click)="sideNavAlert($event)">anchor 2.3</a></li>
  </ul>
  <ul>
    <li><a href="#" class="anchor" id="a31" (click)="sideNavAlert($event)">anchor 3.1</a></li>
    <li><a href="#" class="anchor" id="a32" (click)="sideNavAlert($event)">anchor 3.2</a></li>
    <li><a href="#" class="anchor" id="a33" (click)="sideNavAlert($event)">anchor 3.3</a></li>
  </ul>
</md-sidenav>

Answer 1

在 Angular 2 中，您将 [class.myclass]="boolean expression" 添加到您的元素。只要 boolean expression 为真，就会添加 class myclass。表达式可以是任何有效的js表达式，包括方法调用。

或者，您也可以这样做：[class]="myclass1 myclass2 myclass3"。在这种情况下，表达式是一个字符串，其中包含您所有的 class 名称。

Answer 2

是的，您也可以使用 Angular 2 轻松完成。请使用 [ngClass] 绑定，如下所示：

在您的 app.component.html 中，将其更新为：

 <md-sidenav #start mode="over" class="sideDrawer">
      <ul>
        <li><a href="#" [ngClass]="setClasses('a11')" id="a11" (click)="sideNavAlert($event)">anchor 1.1</a></li>
        <li><a href="#" [ngClass]="setClasses('a12')" id="a12" (click)="sideNavAlert($event)">anchor 1.2</a></li>
        <li><a href="#" [ngClass]="setClasses('a13')" id="a13" (click)="sideNavAlert($event)">anchor 1.3</a></li>
      </ul>
      <ul>
        <li><a href="#" [ngClass]="setClasses('a21')" id="a21" (click)="sideNavAlert($event)">anchor 2.1</a></li>
        <li><a href="#" [ngClass]="setClasses('a22')" id="a22" (click)="sideNavAlert($event)">anchor 2.2</a></li>
        <li><a href="#" [ngClass]="setClasses('a23')" id="a23" (click)="sideNavAlert($event)">anchor 2.3</a></li>
      </ul>
      <ul>
        <li><a href="#" [ngClass]="setClasses('a31')" id="a31" (click)="sideNavAlert($event)">anchor 3.1</a></li>
        <li><a href="#" [ngClass]="setClasses('a32')" id="a32" (click)="sideNavAlert($event)">anchor 3.2</a></li>
        <li><a href="#" [ngClass]="setClasses('a33')" id="a33" (click)="sideNavAlert($event)">anchor 3.3</a></li>
      </ul>
    </md-sidenav>

接下来，在 app.component.ts 中执行

export class AppComponent {

    private selectedAnchorId: string;
    sideNavAlert(e): void {
      this.selectedAnchorId = e.currentTarget.id;
    }

    setClasses(elementId){
      return {
        anchor: true,
        anchorClicked: this.selectedAnchorId === elementId
      };
    }
}

Angular2/Typescript 切换 CSS class 打开和关闭（模拟单选按钮）

Angular2/Typescript toggling CSS class on and off (simulate radio buttons)

jquery

typescript

angular2-template

angular2-routing

angular