Question

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

子组件

 @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
}

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

1 个答案: