单击时如何在角度中添加删除(切换)类

2023-12-05

我想在单击时向 li 添加活动和开放类,并在再次单击时删除这些类

 <li id="xx" class="treeview" (click)="menuToggle($event)">
 <li>

ts

 menuToggle(event: any) {
  this.renderer.addClass()
}

您可以使用模板引用变量来切换模板中的类:

<li #myLi class="treeview" (click)="myLi.classList.toggle('my-class')"><li>

或者,如果您想在组件文件中执行此操作(也许您想添加更多逻辑):

组件.ts

toggleClass = (event) => {
    event.target.classList.toggle('my-class');
}

模板.html

<li class="treeview" (click)="toggleClass($event)"><li>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击时如何在角度中添加删除(切换)类 的相关文章

随机推荐

  • 注释箭头道具中间的动画列表

    我的目标是制作动画df在注释函数的中间 我可以获得动画箭头和第一个值df显示但不使用更新的坐标进行动画处理 为了做到这一点我改变了label set text to Number i 1 但这只是在第一帧的正确位置显示数字 由于未调用新坐标
  • Firebase Messaging 在接收推送通知时不会唤醒 iOS 设备

    我正在使用 FCM 将推送通知发送到单个 iOS 设备 并在对 Firebase Cloud Functions 的 http 请求上触发 遵循 FCM 和 APNs 文档后 当应用程序在后台运行时 一切正常运行 在所有情况下我都成功收到通
  • EF 4.1 - 如何在日期时间列的插入时添加默认值

    使用 EF 4 1 如何向基础表添加默认值 在这种特殊情况下 每次向数据库插入新记录时 如何将日期时间列设置为相当于 getdate 而不必在代码中设置它 提前致谢 elkdanger 提出的解决方案是一种可行的方法 但如果您使用代码优先方
  • javax.persistence.PersistenceException:无效的 persistence.xml

    我正在 eclipse 中使用 Servlet JPA EJB 和 JBoss 进行项目 正如您在我的主题标题中看到的 我的 persistence xml 文件有一个错误 但我不知道是哪个
  • iOS - 仅下载修改后的文件(NSURL 和 NSData)

    我正在从服务器下载一堆图像文件 并且我想确保仅在更新时才下载它们 目前 此方法可以很好地下载图像 但是 我不想在用户每次登录应用程序时浪费时间或精力重新下载图像 相反 我只想下载 A 不存在 B 服务器上比设备上更新的任何文件 这是我下载图
  • 节点 Socket.IO socket.on() 跨多个文件

    我在节点应用程序中使用 Socket IO 并且希望捕获并响应不同文件中的套接字事件 我该怎么做 我找到的一个解决方案是在设置 socket io 的文件中执行此操作 var events module exports setup serv
  • 如何在android中使用volley将json对象发送到服务器

    我想使用 POST 方法将 JSONObject 发送到服务器 我已经使用 volley 库来传递字符串参数 它工作正常 但是如果我尝试使用 json 对象 它会显示调用 json 对象的错误 这是我的代码 private void mak
  • 在 R 中设置永久的默认 CRAN 镜像

    如何在 R 中永久设置特定的 CRAN 镜像 我想将其永久设置在我的笔记本电脑中 这样当我这样做时install packages 它不会再问我选择哪个镜子 您可以设置repos在你的 R配置文件每次启动 R 时恢复您的选择 Edit 更准
  • 如何指示可以使用内联 ASM 参数*指向*的内存?

    考虑以下小函数 void foo int iptr iptr 10 1 asm volatile nop r iptr iptr 10 2 使用海湾合作委员会 这编译为 foo nop mov DWORD PTR rdi 40 2 ret
  • 如何告诉 Netbeans 一段代码是 Javascript?

    我正在使用 Zend Framework 的 javascript 帮助程序 其形式为 Javascript here Rest of view here 问题是 Netbeans 不断抱怨块中的代码问题 因为它认为这是一个 HTML 而不
  • 在 iOS 模拟器中强制终止后台应用程序

    在 iOS 4 中 应用程序会转到后台而不是终止 为此 我必须注册 NSNotificationCenter defaultCenter addObserver self selector selector appWillTerminate
  • 检查用户是否运行过

    我运行一个 Google Apps 脚本 将文件上传到用户的 Google 云端硬盘文件 function doGet e var blob UrlFetchApp fetch e parameters url getBlob DriveA
  • Tcl_AsyncDelete 多线程 Python 错误

    我听说 Python 中的线程不容易处理 而且它们与 tkinter 更加纠缠在一起 我有以下问题 我有两个类 一个用于 GUI 另一个用于无限进程 我必须为两者使用类 首先 我启动 GUI 类 然后启动无限进程类 我希望当你关闭 GUI
  • Coredata PerformBlock 然后返回新值

    如果我正在使用 如何返回保存在 coredata 中的新对象performBlock保存一个 ManagedObjectContext 要求是 在 coredata 中添加一个条目 然后返回它 我的代码是这样的 create a priva
  • C# 列表:使用大小初始化,为什么在 .Add() 之后才能使用 [] 访问?

    这对于数组来说效果很好 int a new int 10 for int i 0 i lt 10 i a i i 但这会抛出一个带有列表的 ArgumentOutOfRangeException List
  • 使用 jQuery .trigger() 将 keydown 发送到 Angular 指令

    我创建了一个编辑指令来将 html 输入包装在一个精美的框架中 现在我正在创建一个单元测试来检查一旦输入输入 表单控制器的脏状态就被设置了 我正在使用 jQuery trigger 来模拟这个 但我什么也没得到 var input inpu
  • 这个运算符叫什么以及它的用途是什么 <=>

    我最近在深入研究 Groovy 时遇到了这个神奇的运算符 Groovy 确实让我对 elvis 操作员感到满意 和 我现在经常使用 并且非常希望在 Java 中使用 有了这个新的运算符 我只找到了这个参考 它似乎使比较器变得更容易 我的问题
  • 未获取服务中共享首选项的更新值

    我正在将一些值存储到从小部件启动的活动的共享首选项中 如果我从同一个小部件启动的服务中检索该值 则它不是更新的值 我得到了共享偏好中先前的值 即使我检查了共享首选项 xml 中的该值 我也看到了更新后的值 为什么会发生这种情况 我知道wid
  • 如何更改 Visual Studio 查找结果窗口中活动行的背景颜色?

    我刚刚切换到黑暗主题在 Visual Studio 中 无法在 查找结果 窗口中找到用于更改当前活动行的背景颜色的设置 最明显的地方是在 工具 选项 字体和颜色 查找结果窗口 设置中 但没有活动行的选择 我还查看了 Visual Studi
  • 单击时如何在角度中添加删除(切换)类

    我想在单击时向 li 添加活动和开放类 并在再次单击时删除这些类 li class treeview li li ts menuToggle event any this renderer addClass 您可以使用模板引用变量来切换模板