将输出从子组件发送到父 Angular

Question

我正在尝试将实时文本从我的孩子发送到我的父组件，以便在用户键入时过滤一些输出。控制台输出是在我键入时会更新的对象，但它是从子组件中触发的。但是，具有子变量的父组件方法没有触发，这是我需要实现管道来过滤 cmets 的地方。

子组件

 @Output() filterEmiter = new EventEmitter<FilterModel>();

    constructor(service: CommentsFilterService) { }

    passFilterToCommentsComponent() {
        console.log(this);
        this.filterEmiter.emit(this.filter)
    }

子组件html

<input name="Customer ID" [ngModel]="filter.customerId" (ngModelChange)="filter.customerId = $event"  (ngModelChange)="passFilterToCommentsComponent()">

父组件

  @Input() filter: FilterModel;

    constructor(service: CommentsService) {
        this.tabs = service.getLongtabs();
    }

    filterReviews() {
        console.log("HIT HIT HIT")
    }

父组件html文件

<proto-approval (filterEmiter)="filterReviews()"></proto-approval>

所需的输出将是"HIT HIT HIT"，因为我键入显示该方法实际上正在被触发。第二个是传递和更新filter 对象，以便实现管道。

Answer 1

这里不需要@ViewChild。只需在模板中订阅filterEmiter，如下所示：

<proto-approval (filterEmiter)="filterReviews($event)">

filterReviews($event){
    this.filter = $event
}