如何在mat-table中获取自定义组件的值/内容？

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

@Component({
  selector: 'app-custom-input',
  template: `<input type="text" [(ngModel)]="value" (ngModelChange)="onValueChange()">`
})
export class CustomInputComponent {
  value: string;
  @Output() valueChange = new EventEmitter<string>();

  onValueChange() {
    this.valueChange.emit(this.value);
  }
}

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="customColumn">
    <mat-header-cell *matHeaderCellDef> Custom Column </mat-header-cell>
    <mat-cell *matCellDef="let element">
      <app-custom-input [(value)]="element.customValue"></app-custom-input>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

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

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  dataSource = [
    { name: 'John', customValue: '' },
    { name: 'Jane', customValue: '' },
    { name: 'Bob', customValue: '' }
  ];

  displayedColumns = ['name', 'customColumn'];

  onValueChange(value: string, index: number) {
    this.dataSource[index].customValue = value;
  }
}