我可以 'observe' 组件的动态子组件吗？

Question

我有一个应用程序，我在其中使用多个表单组件组成表单。现在我想创建某种外键字段，它列出已经存在的对象并显示一个 'add' 按钮。此按钮在模态对话框中显示另一个表单组件。 'sub' 表单仅使用 <ng-content> 显示。这一切都完美无缺

我会说明情况。这是<form-component>:

的模板

<form class="form">
    <form-field>
        <another-form-component (save)="handleSave()"></another-form-component>
    </form-field>
</form>

<form-field>的模板：

<modal-dialog-component [(visible)]="showForm">
    <!--
        Here the <another-form-component> which was passed
        to <form-field> is added:
    -->
    <ng-content></ng-content>
</modal-dialog-component>
<div class="form-field">
    <select> <!-- existing options --> </select>
    <button (click)="openForm($event);">Create new</button>
</div>

如您所见，<another-form-component> 有一个 @Output() 因为它是 save 事件。这是一个 EventEmitter.

我的问题是：如何从 <form-field> 组件订阅此 EventEmitter？我想知道何时保存表单以便我可以关闭 <modal-dialog>.

记住：表单是使用 <ng-content> 传递的。我可以使用 @ViewChildren 获取 <form-field> 的子项并使用某种 addEventListener() 方法吗？是否存在这样的东西？

希望你能帮助我！

您好，约翰

Answer 1

您可以从 <form-field> 组件 class 查询 ContentChildren 并订阅它们发出的事件，如下所示：

export class FormFieldComponent implements AfterContentInit {

    @ContentChildren(AnotherFormComponent) anotherFormComponents: QueryList<AnotherFormComponent>;

    ngAfterContentInit() {
        console.log('anotherFormComponents: ', this.anotherFormComponents.toArray());

        this.anotherFormComponents.toArray()[0].save.subscribe(valueEmitted => {
            console.log('Value emitted from the anotherFormComponents[0]: ', valueEmitted);
        });
    }
 }

每当添加、删除或移动 AnotherFormComponent 时，

QueryList 都会更新。您可以通过订阅 QueryList.changes Observable:

来 'observe' 更改

ngAfterContentInit() {
    this.anotherFormComponents.changes.subscribe(qList => {
        console.log('Changed list: ', qList);
    });
}

顺便说一句，值得了解：

我可以 'observe' 组件的动态子组件吗？

Can I 'observe' the dynamic children of a component?

javascript

angular2-ngcontent

angular