在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;