编辑

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

}

通过EventEmiiter和动态组件angular 6将值从子级传递到父级

1 个答案:

编辑