Angular 7如何实现动态多语言区块独立显隐功能？

我来帮你搞定这个需求！你现在需要把原来的“互斥显示”改成每个语言面板独立控制——点击按钮切换对应面板的显示状态，其他已打开的面板保持不变，只有再次点击原按钮才会关闭它，同时还要支持动态数量的语言，不能硬编码布尔值。下面是具体的实现方案：

核心思路 #

原来的代码用单个visibleIndex变量只能控制一个面板显示，现在我们需要一个状态对象来记录每个语言的显示状态，这样就能支持任意数量的语言，每个面板的状态完全独立。

修改后的TS代码 #

// 用对象存储每个语言的显示状态，键为语言名称，值为布尔值
visibleStates: { [key: string]: boolean } = {};

onclickEnglishDiv(clickLang: string) {
  // 切换当前语言的显示状态：如果状态存在就取反，不存在则默认设为true
  this.visibleStates[clickLang] = !this.visibleStates[clickLang];
}

// 可选：如果需要根据当前语言过滤数据，新增这个方法
getFilteredData(lang: string) {
  // 这里替换成你实际的数据源过滤逻辑，比如从allLangData中筛选对应语言的数据
  return this.allLangData.filter(item => item.lang === lang);
}

修改后的HTML代码 #

<div *ngFor="let lang of langList">
  <div class="engbutton">
    <button class="englishButton" (click)="onclickEnglishDiv(lang)">{{ lang }}</button>
    <!-- 根据当前语言的状态控制面板显示 -->
    <div *ngIf="visibleStates[lang]" class="knowEnglish">
      <div>
        <!-- 调用过滤方法获取当前语言对应的数据 -->
        <div *ngFor="let data of getFilteredData(lang)" class="engDivObj">{{data.name}}</div>
      </div>
    </div>
  </div>
</div>

关键说明 #

1. 状态对象的优势：visibleStates是一个动态的键值对对象，不管langList里有多少种语言，都能自动适配，完全不需要硬编码每个语言的布尔变量。
2. 独立控制逻辑：点击按钮时只切换当前语言的状态，其他语言的显示状态不受影响——比如你打开了英语和法语面板，点击德语按钮只会打开德语面板，前两个依然保持显示，只有再次点击英语按钮才会关闭英语面板。
3. 动态数据过滤：新增的getFilteredData方法可以帮你根据当前语言动态获取对应的数据，避免维护单个filteredLangList变量，更符合动态场景的需求。

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