在 Angular @ViewChild 中将数据从子组件传递到父组件 预期 2 个参数

Question

在这里，我尝试使用 @Output & EventEmitter 和 @ViewChild & AfterViewInit 从孩子向父母传递数据。

这是我的父组件 .html 文件。

<app-child (filterEvent)=" getValuesFromFilters($event)" [name]="name"></app-child>

这是我的父组件 .ts 文件

name = 'View';
@ViewChild(ChildComponent) child: ChildComponent;
getValuesFromFilters($event) {
  this.criteria = $event;
  console.log(this.criteria);
  this.apply();
}

这是我的 ChildComponent .html 文件

<button (click)="applyValues()" mat-raised-button>
  Apply
</button>

这是我的 ChildComponent .ts 文件

export class ChildComponent implements OnInit {
  @Output() filterEvent = new EventEmitter < any > ();
  @Input() name: string;

  ngOnInit() {
    console.log(this.name);
  }
  applyValues() {
    this.filterEvent.emit(this.filterValues);
    console.log(this.filterValues);
  }
}

在这里，如果我单击子组件中的应用按钮，当我发出事件时，值会从子组件传到父组件。但我想在父组件的第一页加载时获取从子组件到父组件的值。因此我试图在父组件中使用@ViewChild。但它给出了这个错误。

TS2554：预期有 2 个参数，但得到了 1 个。core.d.ts(8070, 47)：未提供“opts”的参数。

Answer 1

请试试这个：

<app-child #Child (filterEvent)=" getValuesFromFilters($event)" [name]="name"></app-child>

@ViewChild("Child", { static: true }) child: ChildComponent;