如何在父组件（Angular）中操作来自子组件的数据？

Question

我有两个组件 - 'employee-list'和'employee-edit'

• employee-list : 父组件
• employee-edit ：一个子组件

<员工列表.component.html>

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

<员工列表.component.ts>

import { EmployeeEditComponent } from '../employee-edit/employee-edit.component';

export class EmployeeListComponent implements OnInit {
  displayDialog: boolean = false;

  @Input()
  public employeeEdit!: EmployeeEditComponent;

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

<员工编辑.component.html>

<p-dialog
  header="{{ employeeName }}"
  [(visible)]="displayDialog"
  [style]="{ width: '50vw' }"
  [baseZIndex]="10000"
  ><p>Employee Edit</p></p-dialog
>

<员工编辑.component.ts>

@Component({
  selector: 'app-employee-edit',
  templateUrl: './employee-edit.component.html',
  styleUrls: ['./employee-edit.component.scss'],
})
export class EmployeeEditComponent {
  displayDialog: boolean = false;
}

我想操纵displayDialog ，它是布尔值，以便使用@Input()单击时在另一个组件中打开employee-edit对话框。 但是，它没有按预期工作。

如何在父组件中操作来自子组件的变量？ 谁能帮帮我？

Answer 1

选项1

您想从父组件访问子组件，但您尝试在这种情况下使用@Input() ，这是错误的方法。 @Input()用于将数据从父组件传递到子组件。
如果你想在父组件的代码中使用你的子组件，你必须使用@ViewChild()来获取从父组件操作子组件的权限：

<员工列表.component.html>

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

<员工列表.component.ts>

import { EmployeeEditComponent } from '../employee-edit/employee-edit.component';

export class EmployeeListComponent implements OnInit {
  @ViewChild('editComponent') public employeeEdit!: EmployeeEditComponent;

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

选项 2

另一种选择是将子组件中的displayDialog属性设置为 Input 并将该属性提供给 html 标记：

<员工列表.component.html>

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

<员工列表.component.ts>

export class EmployeeListComponent implements OnInit {
  displayDialog: boolean = false;

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

<员工编辑.component.ts>

@Component({
  selector: 'app-employee-edit',
  templateUrl: './employee-edit.component.html',
  styleUrls: ['./employee-edit.component.scss'],
})
export class EmployeeEditComponent {
  @Input() public displayDialog: boolean = false;
}