使用Angular动态控制标签的open属性-js教程-PHP中文网

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

聖光之護

发布： 2025-09-04 21:01:01

原创

631人浏览过

使用angular动态控制<details>标签的open属性标签的open属性" />

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

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

解决方案

修改数据模型：

首先，在你的数据模型 MenuList 中添加一个 opened 属性，用于记录当前列表项的展开状态。
```
interface MenuList {
  // existing properties
  opened: boolean;
}
```
登录后复制
确保在初始化 list 数组时，为每个 item 设置 opened 的初始值（true 或 false，取决于默认状态）。
修改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>
    <div class="sub-menu-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> 标签。

eMart 网店系统
功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标

0

查看详情

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

修改组件代码：

在组件的 .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> 标签，也适用于其他需要动态控制属性的场景。

以上就是使用Angular动态控制标签的open属性的详细内容，更多请关注php中文网其它相关文章！