如何在父组件中监听@ViewChild获取的sas-plus-minus组件val值变化？

嘿，这个场景我太熟悉了！既然修改子组件添加Output()不太现实，那咱们完全可以在父组件里搞定val的变化监听，给你分享几个靠谱的方法：

方法一：用ngDoCheck手动对比值变化 #

这是最贴合Angular变更检测机制的做法，每次组件触发变更检测时ngDoCheck都会运行，我们可以在这里保存上一次的val值，每次对比是否有变化：

首先在父组件的TS文件里，通过ViewChild拿到子组件的引用，然后实现DoCheck接口：

import { Component, ViewChild, DoCheck } from '@angular/core';
import { SasPlusMinusComponent } from './path-to-your-component'; // 替换成实际组件路径

@Component({
  selector: 'app-parent-component',
  template: `
    <sas-plus-minus value="0" min="0" max="99" #adultCount></sas-plus-minus>
    当前数值：{{ adultCount.val }}
  `
})
export class ParentComponent implements DoCheck {
  @ViewChild('adultCount') adultCount!: SasPlusMinusComponent;
  private lastVal = 0;

  ngDoCheck() {
    // 确保子组件已初始化，再对比值
    if (this.adultCount && this.adultCount.val !== this.lastVal) {
      this.lastVal = this.adultCount.val;
      // 这里写你需要的变化逻辑
      console.log('数值更新啦:', this.lastVal);
      // 比如更新表单、触发其他操作都可以放在这
    }
  }
}

⚠️ 注意：ngDoCheck触发频率很高，所以里面的逻辑一定要尽量轻量化，别放太复杂的计算，避免影响性能。

方法二：用RxJS定时检测+去重 #

如果觉得ngDoCheck太频繁，也可以用RxJS的定时器定期检查val，配合distinctUntilChanged只在值真的变化时触发回调：

同样先拿到子组件引用，然后在ngOnInit里设置监听，记得在组件销毁时取消订阅哦：

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { SasPlusMinusComponent } from './path-to-your-component';
import { interval, Subscription } from 'rxjs';
import { map, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-parent-component',
  template: `
    <sas-plus-minus value="0" min="0" max="99" #adultCount></sas-plus-minus>
    当前数值：{{ adultCount.val }}
  `
})
export class ParentComponent implements OnInit, OnDestroy {
  @ViewChild('adultCount') adultCount!: SasPlusMinusComponent;
  private valSub?: Subscription;

  ngOnInit() {
    // 每100ms检查一次，你可以根据需求调整间隔
    this.valSub = interval(100)
      .pipe(
        map(() => this.adultCount?.val),
        distinctUntilChanged()
      )
      .subscribe(newVal => {
        if (newVal !== undefined) {
          console.log('数值变了:', newVal);
          // 处理你的业务逻辑
        }
      });
  }

  ngOnDestroy() {
    // 销毁组件时取消订阅，防止内存泄漏
    this.valSub?.unsubscribe();
  }
}

这个方法的好处是可以控制检测频率，减少不必要的逻辑执行，但会有一点微小的延迟，适合对实时性要求不是特别高的场景。

方法三：监听子组件的DOM点击事件（如果能拿到DOM结构） #

如果你能通过浏览器开发者工具查到sas-plus-minus组件里加减按钮的类名或选择器，那可以用Renderer2直接监听按钮的点击事件，间接感知val的变化：

import { Component, ViewChild, OnInit, OnDestroy, Renderer2 } from '@angular/core';
import { SasPlusMinusComponent } from './path-to-your-component';

@Component({
  selector: 'app-parent-component',
  template: `
    <sas-plus-minus value="0" min="0" max="99" #adultCount></sas-plus-minus>
    当前数值：{{ adultCount.val }}
  `
})
export class ParentComponent implements OnInit, OnDestroy {
  @ViewChild('adultCount') adultCount!: SasPlusMinusComponent;
  private plusClick?: () => void;
  private minusClick?: () => void;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    // 这里假设加号按钮的类名是'plus-btn'，减号是'minus-btn'，要根据实际DOM调整
    const plusBtn = this.adultCount.nativeElement.querySelector('.plus-btn');
    const minusBtn = this.adultCount.nativeElement.querySelector('.minus-btn');

    if (plusBtn) {
      this.plusClick = this.renderer.listen(plusBtn, 'click', () => {
        console.log('加号被点啦，当前值:', this.adultCount.val);
        // 处理变化逻辑
      });
    }

    if (minusBtn) {
      this.minusClick = this.renderer.listen(minusBtn, 'click', () => {
        console.log('减号被点啦，当前值:', this.adultCount.val);
        // 处理变化逻辑
      });
    }
  }

  ngOnDestroy() {
    // 移除监听，避免内存泄漏
    this.plusClick?.();
    this.minusClick?.();
  }
}

这个方法的优势是能实时响应点击动作，没有延迟，但前提是你得清楚子组件的DOM结构，能准确找到按钮元素。

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