Angular2+基于按钮值切换Div内容的实现方案咨询

嘿，我注意到你现在用原生DOM操作的方式来切换内容，这其实不太符合Angular的设计理念哦。咱们可以用Angular的数据绑定特性来更优雅地实现这个功能，代码更简洁也更易维护，来看看具体怎么做：

第一步：重构组件类（TypeScript） #

咱们把直接操作DOM的逻辑改成操作组件内的变量，让Angular的变更检测自动帮我们更新视图：

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  title: string = "provas";
  // 新增变量存储要显示的标题和描述
  currentExpandTitle: string = '';
  currentExpandDesc: string = '';

  constructor() { }

  ngOnInit(): void {
    // 初始化可设置默认显示内容
    this.populateData('distancia');
  }

  populateData(value: string): void {
    switch(value){
      case 'distancia':
        this.currentExpandTitle = "chute em distância";
        this.currentExpandDesc = "这里是远距离射门的详细描述内容...";
        break;
      case 'velocidade':
        this.currentExpandTitle = "chute em velocidade";
        this.currentExpandDesc = "这里是高速射门的详细描述内容...";
        break;
      // 可继续添加更多选项的case
      default:
        this.currentExpandTitle = "默认标题";
        this.currentExpandDesc = "默认描述内容...";
    }
  }
}

第二步：修改HTML模板 #

用Angular的插值表达式绑定变量，按钮点击时直接传递对应值给方法，无需通过event获取属性：

<!-- 按钮组 -->
<button (click)="populateData('distancia')" value="distancia">远距离射门</button>
<button (click)="populateData('velocidade')" value="velocidade">高速射门</button>

<!-- 切换内容的Div -->
<div class="prova-expand-title">{{ currentExpandTitle }}</div>
<div class="prova-expand-desc">{{ currentExpandDesc }}</div>

额外说明 #

如果你的描述内容是HTML片段，可通过[innerHTML]绑定渲染：

<div class="prova-expand-desc" [innerHTML]="currentExpandDesc"></div>

不过要注意安全问题，如果内容来自用户输入，需要用DomSanitizer处理后再绑定哦。

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