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>以便它被注入，然后在视图init生命周期钩子之后你可以访问有问题的变量。

选项2：

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

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

如果你想将数据传递给dx-popover组件，你可以使用输入装饰器作为另一种方式。

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

Answer 2

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

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

Here is the updated plunk.

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

2 个答案: