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

标签的open属性" />

本文介绍了如何在Angular 14+中动态控制HTML5 <details> 标签的 open 属性，以实现点击列表项时展开/折叠详情的功能。通过在数据模型中添加状态标志，并使用属性绑定，可以灵活地控制 <details> 标签的展开状态，避免直接操作DOM元素，遵循Angular的最佳实践。

在使用 <details> 和 <summary> 标签创建可折叠/展开的内容时，有时需要在Angular应用中动态控制 <details> 标签的 open 属性。例如，当点击列表项时，根据其状态展开或折叠对应的详情内容。直接操作DOM元素虽然可行，但并不推荐，因为它违反了Angular的数据绑定原则。以下介绍一种更优雅的解决方案，利用Angular的属性绑定来实现动态控制。

解决方案

1. 修改数据模型：

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

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

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

2. 修改HTML模板：

   在HTML模板中，使用属性绑定 [attr.open] 来动态控制 <details> 标签的 open 属性。

   <li
     class="nav-list-item"
     *ngFor="let item of list"
     (click)="item.opened = !item.opened"
   >
     <details [attr.open]="item.opened ? true : null">
       <summary>
         <!-- Summary content -->
       </summary>
       <div class="sub-menu-content">
         <!-- Detail content -->
       </div>
     </details>
   </li>

   这里，(click)="item.opened = !item.opened" 用于切换 item.opened 的值，而 [attr.open]="item.opened ? true : null" 根据 item.opened 的值来设置 open 属性。当 item.opened 为 true 时，open 属性被设置为 true，从而展开 <details> 标签。当 item.opened 为 false 时，open 属性被设置为 null，从而移除该属性，折叠 <details> 标签。

   

   MedPeer自然科学基金

   科研申报与成果分析的智能数据引擎

   下载

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

3. 修改组件代码：

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

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

完整示例

side-nav.html

<div class="side-nav-content">
  <ul class="nav-list" [ngClass]="{ 'nav-list-open': sideNavStatus }">
    <a class="nav-list-item" (click)="sideNavStatus = !sideNavStatus">
      <img src="{{ changeSideNavButton() }}" alt="Menu burguer icon" />
    </a>
    <li
      class="nav-list-item"
      *ngFor="let item of list"
      (click)="item.opened = !item.opened"
    >
      <details [attr.open]="item.opened ? true : null">
        <summary>
          <img
            src="{{ item.menu.icon }}"
            alt="{{ item.menu.name }} menu icon"
            class="item-icon"
          />
          <span class="item-title" [ngClass]="{ 'show-title': sideNavStatus }">
            <a class="item-title-text"
              >{{ item.menu.name }}
              <img
                src="../../../assets/side-menu-icons/arrow-down-svgrepo-com.svg"
                alt="Arrow down Icon"
                class="item-arrow-icon"
                [ngClass]="{ 'sub-menu-open': subMenuStatus }"
              />
            </a>
          </span>
        </summary>
        <div class="sub-menu-content">
          <ul class="sub-list">
            <li
              class="sub-list-item"
              *ngFor="let item of item.menu.subMenuList"
            >
              <img src="{{ item.icon }}" alt="{{ item.name }} menu icon" />
              <span>
                <a href=""
                  >{{ item.name }}
                  <img
                    [ngClass]="{ 'show-arrow': item.subSubMenuList }"
                    src="../../../assets/side-menu-icons/arrow-down-svgrepo-com.svg"
                    alt="Arrow down Icon"
                  />
                </a>
              </span>
            </li>
          </ul>
        </div>
      </details>
    </li>
  </ul>
</div>

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] 进行属性绑定，可以实现动态控制 <details> 标签的展开状态。这种方法避免了直接操作DOM元素，遵循了Angular的数据绑定原则，使代码更清晰、更易于维护。 记住，使用 null 来移除 open 属性，而不是设置 open="false"。 这种方法不仅适用于 <details> 标签，也适用于其他需要动态控制属性的场景。