如何在 Angular2 中的 Devextreme dxPopover 中访问 dxTemplate 中的表单

Question

我需要订阅 dxPopover 中的表单更改，如下所示，但该表单始终未定义。

但是，如果我将表单移到 dxPopover 之外，就没有问题了。

如何访问 dxPopover 中的表单元素？

模板：

<dx-popover 
                target="#button" 
                position="bottom"
                width="900px" 
                [visible]="true">

    <div *dxTemplate="let data of 'content'">
            <form  #form="ngForm" >
                <!-- form content -->
            </form>
    </div>
</dx-popover>

组件：

@ViewChild('form') form;

ngAfterViewInit() {
    console.log(this.form); // outputs 'undefined'

}

编辑：这是一个小插曲 - https://plnkr.co/edit/nQJ0brGs0FlMBkexuavK

Answer 1

选项 1：

像在 dxPopover 标记中那样传递 HTML 需要您在 dxPopover 模板中添加 <ng-content> 以便它被注入，然后在视图初始化生命周期挂钩之后您可以访问有问题的变量。

选项 2：

您应该将 div 移动到实际组件模板中的 dx-popover 组件指令中。

然后使用输出装饰器将表单的值发送到托管 dx-popover 组件的父组件

如果您想将数据传递给 dx-popover 组件，您可以使用 Input 装饰器作为相反的方式。

请查看官方文档以获取示例Here

Answer 2

由于隐藏弹出窗口时 DOM 中甚至不存在 dxPopover 的内容，因此无法对其执行 @ViewChild。

但是，在显示弹出窗口时可以访问这两种形式。

Here is the updated plunk.

如何在 Angular2 中的 Devextreme dxPopover 中访问 dxTemplate 中的表单

How to access the form inside dxTemplate inside Devextreme dxPopover in Angular2

devextreme

angular