如何在details元素关闭时不生成div元素？现有代码无法生效

你的代码无法正常运行的核心原因是：原生<details>的open属性变化不会自动触发Angular的变更检测，模板里直接通过模板引用变量#dtv读取dtv.open无法实现响应式更新。

下面是两种可行的解决方案：

方案一：通过事件监听维护响应式变量 #

在组件类中定义布尔变量，监听<details>的toggle事件更新变量，再用该变量控制*ngIf：

组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-details-demo',
  templateUrl: './details-demo.component.html',
})
export class DetailsDemoComponent {
  isDetailsOpen = false;

  onDetailsToggle(event: Event) {
    const detailsElement = event.target as HTMLDetailsElement;
    this.isDetailsOpen = detailsElement.open;
  }
}

模板代码 #

<details (toggle)="onDetailsToggle($event)">
  <summary>Details</summary>
  <div class="xd" *ngIf="isDetailsOpen">lala</div>
</details>

方案二：使用ViewChild监听DOM属性变化 #

用ViewChild获取<details>元素，在组件初始化后监听属性变化：

组件类代码 #

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-details-demo',
  templateUrl: './details-demo.component.html',
})
export class DetailsDemoComponent implements AfterViewInit {
  @ViewChild('dtv') detailsElement!: ElementRef<HTMLDetailsElement>;
  isDetailsOpen = false;

  ngAfterViewInit() {
    this.isDetailsOpen = this.detailsElement.nativeElement.open;
    this.detailsElement.nativeElement.addEventListener('toggle', () => {
      this.isDetailsOpen = this.detailsElement.nativeElement.open;
    });
  }
}

模板代码 #

<details #dtv>
  <summary>Details</summary>
  <div class="xd" *ngIf="isDetailsOpen">lala</div>
</details>

这两种方案都能确保div元素只在<details>打开时创建，关闭时销毁。

内容的提问来源于stack exchange，提问作者rdsm2