使用Angular动态控制标签的open属性

标签的open属性" />

本文介绍了如何在Angular 14+中动态控制HTML5 ails> 标签的 open 属性，以实现点击列表项时展开/折叠详情的功能。通过在数据模型中添加状态标志，并使用属性绑定，可以灵活地控制

在使用

解决方案

1. 修改数据模型：

   首先，在你的数据模型 MenuList 中添加一个 opened 属性，用于记录当前列表项的展开状态。

   interface MenuList {
     // existing properties
     opened: boolean;
   }

   确保在初始化 list 数组时，为每个 item 设置 opened 的初始值（true 或 false，取决于默认状态）。

2. 修改HTML模板：

   在HTML模板中，使用属性绑定 [attr.open] 来动态控制

   标签的 open 属性。

   这里，(click)="item.opened = !item.opened" 用于切换 item.opened 的值，而 [attr.open]="item.opened ? true : null" 根据 item.opened 的值来设置 open 属性。当 item.opened 为 true 时，open 属性被设置为 true，从而展开

   标签。当 item.opened 为 false 时，open 属性被设置为 null，从而移除该属性，折叠

   标签。
   

   逍遥内容管理系统(Carefree CMS)1.3.0

   系统简介逍遥内容管理系统（CarefreeCMS）是一款功能强大、易于使用的内容管理平台，采用前后端分离架构，支持静态页面生成，适用于个人博客、企业网站、新闻媒体等各类内容发布场景。核心特性1、模板套装系统 - 支持多套模板自由切换，快速定制网站风格2、静态页面生成 - 一键生成纯静态HTML页面，访问速度快，SEO友好3、文章管理 - 支持富文本编辑、草稿保存、文章属性标记、自动提取SEO4、全

   下载

   注意： open="false" 仍然会被浏览器解析为 open 属性存在，因此需要使用 null 来移除该属性。

3. 修改组件代码：

   在组件的 .ts 文件中，确保 list 数组中的每个对象都包含 opened 属性。

   export class SideMenuComponent {
     list: MenuList[] = [
       {
         // other properties
         opened: false, // Initial state
       },
       // ... other items
     ];
   }

完整示例

side-nav.html

  

    
      @@##@@
    
    

      

        

          @@##@@
          
            {{ item.menu.name }}
              @@##@@
            
          
        
        

          

            

              @@##@@
              
                {{ item.name }}
                  @@##@@
                
              
            
          
        
      
    
  

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] 进行属性绑定，可以实现动态控制