Angular中如何判断传入的引用是否与指定ViewChild引用相等

架构老林

2026-6-16

解决方案

在Angular中，你当前写法里模板传入的someDialog是自定义组件abc-dialog的组件实例，而@ViewChild('someDialog')获取的是ElementRef包装对象，两者类型不同，直接对比会不相等。可以通过两种方式实现判断：

方式1：对比DOM元素引用

如果你需要验证两者对应的DOM元素是否一致，可通过nativeElement属性获取真实DOM节点后对比：

import { Component, ViewChild, ElementRef } from '@angular/core';
// 引入你的abc-dialog组件类
import { AbcDialogComponent } from './abc-dialog.component';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('someDialog') someDialog: ElementRef;

  onDialogClose(dialogInstance: AbcDialogComponent) {
    // 从组件实例中获取DOM元素
    const dialogDom = dialogInstance.nativeElement;
    // 对比ViewChild对应的DOM元素
    const isEqual = dialogDom === this.someDialog.nativeElement;
    console.log('引用是否相等:', isEqual);
  }
}

方式2：直接对比组件实例引用

更合理的做法是将@ViewChild的类型改为自定义组件类，直接对比组件实例的引用：

import { Component, ViewChild } from '@angular/core';
import { AbcDialogComponent } from './abc-dialog.component';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 直接获取abc-dialog的组件实例，而非ElementRef
  @ViewChild('someDialog') someDialog: AbcDialogComponent;

  onDialogClose(dialogInstance: AbcDialogComponent) {
    // 直接对比两个组件实例的引用
    const isEqual = dialogInstance === this.someDialog;
    console.log('引用是否相等:', isEqual);
  }
}