使用 EventEmiiter 和动态组件 angular 6 将值从子级传递给父级

Question

嗨，我有使用动态组件加载器的动态表单 所以我的父母看起来像这样

<div class="item-form-block-content">
    <div class="form-block">
       <ng-template pf-host></ng-template>
    </div>
</div>

还有许多在 ng-template 中过去的孩子。我想将数据从孩子传递给父母。我正在使用EventEmitter

例如，我的一个子组件

<input type="text" [(ngModel)]="value" (change)="onValueChange(value)"/>

在控制器中

export class childComp implements OnInit {
@Output() someVar = new EventEmitter<any>();

onValueChange(val: any) {
    this.someVar.emit(val);
}}

那么我怎样才能将我的someVar 传递给父母呢？

Answer 1

您只需在父组件模板中的子组件上注册一个事件侦听器，如下所示：

<child (someVar)="doSomething($event)"></child>

然后在你的父组件中定义doSomething(value: any) {}方法来处理发射的值。

编辑

更仔细地查看您的需求，并从this GitHub post 中汲取灵感，可以通过在父组件中手动注册事件侦听器来做到这一点：

class ParentComponent implements AfterContentInit {

    @ContentChildren(ChildComponent)  
    List<ChildComponent> children;

    void onSomeValEvent() {
        console.log("Event received!");
    }

    ngAfterContentInit() {
        this.children.forEach((ChildComponent child) {
            child.someVal.listen((_) => onSomeValEvent());
        });
    }

}