求助：基于模板变量实现指定HTML Div元素的显示切换功能

1. 修正并完善HTML模板 #

先补全菜单标签的闭合，给内容div统一添加类名方便批量控制，保留模板引用变量：

<div class="container">
  <div #variable1 class="content-div">Some content 1</div>
  <div #variable2 class="content-div">Some content 2</div>
  <div #variable3 class="content-div">Some content 3</div>
</div>

<ul class="menu">
  <li (click)="displaySpecificDiv(variable1)">
    <span>item 1</span>
  </li>
  <li (click)="displaySpecificDiv(variable2)">
    <span>item 2</span>
  </li>
  <li (click)="displaySpecificDiv(variable3)">
    <span>item 3</span>
  </li>
</ul>

添加基础CSS控制初始隐藏：

.content-div {
  display: none;
}

2. 组件类实现核心逻辑 #

在Angular组件中，通过@ViewChildren获取所有内容div的引用，编写displaySpecificDiv函数实现"隐藏所有+显示目标"的切换：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChildren('variable1, variable2, variable3') contentDivs!: QueryList<ElementRef<HTMLElement>>;

  displaySpecificDiv(targetElement: ElementRef<HTMLElement>) {
    // 先隐藏所有div
    this.contentDivs.forEach(div => {
      div.nativeElement.style.display = 'none';
    });
    // 显示目标div
    targetElement.nativeElement.style.display = 'block';
  }
}

3. 按需求实现switch逻辑版本 #

如果必须用switch语句，给每个div添加id标识后修改函数：

HTML模板调整：

<div class="container">
  <div #variable1 id="variable1" class="content-div">Some content 1</div>
  <div #variable2 id="variable2" class="content-div">Some content 2</div>
  <div #variable3 id="variable3" class="content-div">Some content 3</div>
</div>

组件类函数修改：

displaySpecificDiv(targetElement: ElementRef<HTMLElement>) {
  // 先隐藏所有div
  this.contentDivs.forEach(div => {
    div.nativeElement.style.display = 'none';
  });

  const elementId = targetElement.nativeElement.id;
  switch(elementId) {
    case 'variable1':
    case 'variable2':
    case 'variable3':
      targetElement.nativeElement.style.display = 'block';
      break;
    default:
      // 默认显示第一个div
      this.contentDivs.first.nativeElement.style.display = 'block';
  }
}

额外优化：默认显示第一个div #

页面加载时默认展示第一个内容，可在生命周期钩子中设置：

ngAfterViewInit() {
  this.contentDivs.first.nativeElement.style.display = 'block';
}

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