如何给Angular自定义组件绑定内部点击事件实现状态自维护

解决方案 #

你可以按照以下步骤修改即可实现组件内部维护状态，不需要父组件额外维护布尔变量：

1. 修改组件TS代码：移除原来作为输入属性的reveal，替换为内部私有状态，新增切换状态的点击处理方法：

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  @Input() text: string;
  @Input() imgSrc: string;
  // 内部维护显示状态，初始为不显示
  private isRevealed = false;

  ngOnInit() {
  }    

  // 内部处理点击切换逻辑
  toggleReveal() {
    this.isRevealed = !this.isRevealed;
  }
}

2. 修改组件HTML模板：给内部的span元素绑定点击事件，ngClass绑定内部维护的isRevealed状态：

<span class="my-span" [ngClass]="isRevealed ? 'is-active' : ''" (click)="toggleReveal()">
  {{ text }}
  <!-- 这里替换为Angular属性绑定写法，更符合框架规范 -->
  <img [src]="imgSrc" alt="">
</span>

3. 简化组件调用方式：不需要在父组件绑定点击事件和维护状态，直接传入必要的输入属性即可：

<my-component text="some text" imgSrc="images/my-image.jpeg"></my-component>

如果有特殊场景需要父组件主动控制显示状态，可以保留输入属性做兼容，在组件类中新增以下代码即可同时支持内部切换和外部控制：

@Input() set reveal(value: boolean) {
  this.isRevealed = value;
}

原来点击事件不生效的核心原因是你之前把状态维护逻辑放在父组件，如果你父组件没有提前声明clickTest变量就会出现逻辑失效，且这种实现确实违反了组件封装的原则。

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