Angular父组件操作子组件变量失败，求正确实现方法

问题分析 #

你当前代码的核心错误在于：父组件用@Input()声明employeeEdit是完全错误的用法——@Input()是子组件用来接收父组件传递数据的装饰器，并非用于获取子组件实例。因此父组件内的this.employeeEdit实际为undefined，自然无法修改子组件的displayDialog变量。

以下提供两种正确实现方式：

方案一：使用@ViewChild获取子组件实例 #

通过@ViewChild可直接获取子组件实例，进而操作其内部变量：

父组件（employee-list.component.ts）修改： #

import { EmployeeEditComponent } from '../employee-edit/employee-edit.component';
import { ViewChild, OnInit } from '@angular/core';

export class EmployeeListComponent implements OnInit {
  // 用ViewChild获取子组件实例
  @ViewChild(EmployeeEditComponent) 
  public employeeEdit!: EmployeeEditComponent;

  openDialog() {
    // 直接修改子组件变量
    this.employeeEdit.displayDialog = true;
  }
}

父组件模板（employee-list.component.html）无需修改： #

<button pButton type="button" (click)="openDialog()">
  <i class="pi pi-pencil" aria-label="Edit"></i>
</button>
<app-employee-edit></app-employee-edit>

方案二：使用@Input实现父传子（更符合Angular规范） #

这种方式遵循Angular单向数据流原则，子组件通过@Input接收父组件状态，而非让父组件直接修改子组件内部变量，更推荐使用：

子组件（employee-edit.component.ts）修改： #

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

@Component({
  selector: 'app-employee-edit',
  templateUrl: './employee-edit.component.html',
  styleUrls: ['./employee-edit.component.scss'],
})
export class EmployeeEditComponent {
  // 用@Input接收父组件传递的弹窗状态
  @Input() displayDialog: boolean = false;
}

父组件（employee-list.component.ts）修改： #

export class EmployeeListComponent implements OnInit {
  // 父组件维护弹窗状态
  displayDialog: boolean = false;

  openDialog() {
    this.displayDialog = true;
  }
}

父组件模板（employee-list.component.html）修改： #

<button pButton type="button" (click)="openDialog()">
  <i class="pi pi-pencil" aria-label="Edit"></i>
</button>
<!-- 将父组件状态传递给子组件 -->
<app-employee-edit [displayDialog]="displayDialog"></app-employee-edit>

若需子组件关闭弹窗时通知父组件更新状态，可结合@Output和EventEmitter实现双向绑定：
子组件添加代码：

@Output() displayDialogChange = new EventEmitter<boolean>();

// 弹窗关闭时调用
onDialogClose() {
  this.displayDialogChange.emit(false);
}

父组件模板可改用双向绑定语法：

<app-employee-edit [(displayDialog)]="displayDialog"></app-employee-edit>

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