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

Question

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

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

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

比如我的一个子组件

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

在 Controller 中

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());
        });
    }

}