Angular 5：如何正确实现基于元素名称的属性绑定以切换显示状态

嘿，你的思路方向是对的，但直接操作nativeElement确实不符合Angular的最佳实践——咱们应该用数据驱动视图的方式来实现，而不是直接碰DOM。针对你这种硬编码的tab场景，这里有个更规范的实现方案：

步骤1：在组件类中定义状态变量 #

因为你的tab是硬编码的，咱们可以给每个tab单独定义布尔变量来控制箭头的显示状态，把状态逻辑集中在组件类里：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  // 初始化每个tab的箭头状态，可根据需求设置初始值
  tab1ShowBorder = false;
  tab2ShowBorder = false;

  checkAndDisplay(tabKey: string) {
    // 根据传入的tab标识切换对应状态
    switch(tabKey) {
      case 'tab1':
        this.tab1ShowBorder = !this.tab1ShowBorder;
        break;
      case 'tab2':
        this.tab2ShowBorder = !this.tab2ShowBorder;
        break;
    }
    // 这里添加你的其他业务逻辑
  }
}

步骤2：修改模板，用组件变量绑定*ngIf #

把原来依赖DOM属性的逻辑换成绑定组件类里的变量，点击事件传递对应的tab标识即可：

<li (click)="checkAndDisplay('tab1')">
  <div class="arr arrow-border" *ngIf="tab1ShowBorder"></div>
  <div class="arr arrow-fill" *ngIf="!tab1ShowBorder"></div>
</li>

<li (click)="checkAndDisplay('tab2')">
  <div class="arr arrow-border" *ngIf="tab2ShowBorder"></div>
  <div class="arr arrow-fill" *ngIf="!tab2ShowBorder"></div>
</li>

额外优化：用对象统一管理状态 #

如果后续tab数量增加，也可以用一个对象来统一管理所有tab的状态，扩展性更强：

// 组件类里替换状态变量
tabStates = {
  tab1: false,
  tab2: false
};

checkAndDisplay(tabKey: string) {
  this.tabStates[tabKey] = !this.tabStates[tabKey];
  // 其他逻辑
}

模板里对应修改：

<li (click)="checkAndDisplay('tab1')">
  <div class="arr arrow-border" *ngIf="tabStates.tab1"></div>
  <div class="arr arrow-fill" *ngIf="!tabStates.tab1"></div>
</li>

为什么这更规范？ #

• 遵循Angular单向数据流原则，视图完全由组件状态驱动，避免直接操作DOM带来的兼容性和生命周期问题
• 状态集中管理，更容易调试、维护和编写单元测试
• 完全符合Angular的组件化开发理念

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