本文介绍了如何在Angular 14+中动态控制HTML5 ails> 标签的 open 属性，以实现点击列表项时展开/折叠详情的功能。通过在数据模型中添加状态标志，并使用属性绑定，可以灵活地控制
在使用
标签创建可折叠/展开的内容时，有时需要在Angular应用中动态控制
标签的 open 属性。例如，当点击列表项时，根据其状态展开或折叠对应的详情内容。直接操作DOM元素虽然可行，但并不推荐，因为它违反了Angular的数据绑定原则。以下介绍一种更优雅的解决方案，利用Angular的属性绑定来实现动态控制。
解决方案
修改数据模型：
首先，在你的数据模型 MenuList 中添加一个 opened 属性，用于记录当前列表项的展开状态。
interface MenuList { // existing properties opened: boolean;}
确保在初始化 list 数组时，为每个 item 设置 opened 的初始值（true 或 false，取决于默认状态）。
修改HTML模板：
在HTML模板中，使用属性绑定 [attr.open] 来动态控制
这里，(click)=”item.opened = !item.opened” 用于切换 item.opened 的值，而 [attr.open]=”item.opened ? true : null” 根据 item.opened 的值来设置 open 属性。当 item.opened 为 true 时，open 属性被设置为 true，从而展开
注意： open=”false” 仍然会被浏览器解析为 open 属性存在，因此需要使用 null 来移除该属性。
修改组件代码：
在组件的 .ts 文件中，确保 list 数组中的每个对象都包含 opened 属性。
export class SideMenuComponent { list: MenuList[] = [ { // other properties opened: false, // Initial state }, // ... other items ];}
完整示例
side-nav.html
side-nav.ts
export interface SubMenuList { icon: string; name: string; subSubMenuList?: SubMenuList[];}export interface Menu { icon: string; name: string; subMenuList: SubMenuList[];}export interface MenuList { menu: Menu; opened: boolean; // Add the opened property}export class SideMenuComponent { @Input() sideNavStatus: boolean = false; subMenuStatus: boolean = false; subMenuOpen!: boolean; list: MenuList[] = [ { menu: { icon: '../../../assets/side-menu-icons/grid-svgrepo-com.svg', name: 'Dashboard', subMenuList: [], }, opened: false, // Initial state }, { menu: { icon: '../../../assets/side-menu-icons/component-svgrepo-com.svg', name: 'Components', subMenuList: [], }, opened: false, // Initial state }, { menu: { icon: '../../../assets/side-menu-icons/folder-open-svgrepo-com.svg', name: 'Pages', subMenuList: [ { icon: '../../../assets/side-menu-icons/user-svgrepo-com.svg', name: 'Profile', }, { icon: '../../../assets/side-menu-icons/setting-2-svgrepo-com.svg', name: 'Settings', }, ], }, opened: false, // Initial state }, ]; changeSideNavButton(): string { if (this.sideNavStatus) { return '../../../assets/side-menu-icons/menu-collapsed-svgrepo-com.svg'; } else { return '../../../assets/side-menu-icons/menu-expand-svgrepo-com.svg'; } } onSubMenu(e: any) { // No longer needed as the state is handled in the template }}
总结
通过在数据模型中添加 opened 属性，并使用 [attr.open] 进行属性绑定，可以实现动态控制
以上就是使用Angular动态控制标签的open属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519275.html
微信扫一扫 
支付宝扫一扫 
