TypeScript 中使用 onclick 切换类的角度

在 TypeScript 中，我们常常需要使用 onclick 来响应用户的交互行为。而点击元素时切换其类是一种常见的操作。下面将从角度上介绍如何在 TypeScript 中实现该操作。

HTML 部分

首先，在 HTML 中，我们需要为元素添加一个初始类名，并设置其 onclick 事件为一个函数，该函数将在点击该元素时被触发，并按需改变其类名。

<button class="btn btn-primary" onclick="toggleClass(this)">点击按钮</button>

TypeScript 部分

接下来，在 TypeScript 中，我们需要定义一个名为 toggleClass 的函数，并在该函数中实现切换元素类名的操作。

function toggleClass(element: HTMLElement) {
  const className = 'active';
  if (element.classList.contains(className)) {
    element.classList.remove(className);
  } else {
    element.classList.add(className);
  }
}

在上面的代码中，我们通过 element.classList.contains(className) 判断该元素是否已经包含了所需类名，若是，则使用 element.classList.remove(className) 来删除该类名；若不是，则使用 element.classList.add(className) 来添加该类名。

完整代码片段

最终的 TypeScript 代码片段如下所示：

function toggleClass(element: HTMLElement) {
  const className = 'active';
  if (element.classList.contains(className)) {
    element.classList.remove(className);
  } else {
    element.classList.add(className);
  }
}

<button class="btn btn-primary" onclick="toggleClass(this)">点击按钮</button>

以上是使用 onclick 实现切换元素类名的一种角度，希望对您有所帮助。