将数据从 child 组件传递到 Angular 中的 parent 组件 @ViewChild 需要 2 个参数

Question

在这里，我尝试使用 @Output & EventEmitter 和 @ViewChild & AfterViewInit 将数据从 child 传递到 parent。

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

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

这是我的 parent 组件 .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);
  }
}

在这里，如果我单击 child 组件中的应用按钮，值会从 child 到 parent，因为我正在发出一个事件。但是我想在 parent 的第一个页面加载时获取从 child 到 parent 组件的值。因此，我试图在 parent 组件中使用 @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;

将数据从 child 组件传递到 Angular 中的 parent 组件 @ViewChild 需要 2 个参数

Pass data from child component to parent component in Angular @ViewChild Expected 2 arguments

angular

typescript

angular-components

viewchild

angular-event-emitter