Question

我有一个应用程序，我使用多个表单组件组成表单。现在我想创建一种外键字段，列出已存在的对象，并显示“添加”按钮。此按钮在模式对话框中显示另一个表单组件。只需使用<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>的{{1}}事件有@Output()。这是save。

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

请记住：表单是使用<modal-dialog>传递的。我可以使用<ng-content>来获取@ViewChildren的孩子并使用某种<form-field>方法吗？这样的事情是否存在？

希望你能帮助我！

问候，约翰

Answer 1

您可以从<form-field>组件类中查询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都会更新。你可以观察＆＃39;通过订阅QueryList.changes Observable：

进行更改

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

顺便说一下，它值得了解：What's the difference between @ViewChild and @ContentChild?

我可以“观察”组件的动态子项吗？

1 个答案: