angular 可移动弹框

方法一：

html： 添加指令<div kendoWindowContainer></div>

ts: 1、声明 @ViewChild(WindowContainerDirective, {read: ViewContainerRef}) windowContainer: ViewContainerRef;

      2、在constructor 中注入 private windowService: WindowService

      3、引用弹框的方法

top left ：限制弹框位置

wind.content.instance.xxxx : 传递参数 / 获取返回值

弹框ts: 1、接收参数

             

            2、在constructor中注入 private window: WindowRef

            3、返回方法只需为全局变量赋值 即可在父组件中通过wind.content.instance.变量名获取

 

在某些情况下可能出现连续点击弹框失效，具体原因不明可能是指令出现冲突，因此更推荐使用方法二

方法二：

html: 添加指令  <ng-container #windowContainer></ng-container>

ts: 1、声明  @ViewChild("windowContainer", { read: ViewContainerRef }) public containerRef: ViewContainerRef;

     2、在constructor 中注入 private windowService: WindowService

     3、引用弹框的方法

          

          红框是与方法一不同的地方，注意变量名和@ViewChild("windowContainer"，...的区别

弹框ts：与方法一一致