angualr4+ionic3开发app中popover的用法

在用ionic3开发app的时候，遇到一个弹窗的问题，就是点击一个按钮会弹出一个盒子，然后点击页面的其他部分该盒子会消失，关于这一个问题，查了一下ionic3文档中的popover，便得到了很好的解决

就是类似于上图这种的，下面写一下他的具体的用法

在HTML页面：

你需要一个按钮，并添加一个点击事件，来控制盒子的出现和消失，然后在ts文件中编写改点击事件

在ts文件中

你需要先引进PopoverController这个控制器，然后就能像上面图中一样使用，然后说下他的具体用法。

在这里我要强调一下，使用popove弹出的并不是一个盒子，而是一个页面，但我们可以控制页面的大小，位置来实现我们的要求，所以我们要先创建一个页面，并且在appModel里面声明。

要想使用popover其他的内容都不需要去改，只需要修改 let popover = this.popoverCtrl.create（）中的内容。

create（）里面有三个参数create(component, data, opts)

    component：你要弹出的页面的名字

    data：你想要往该页面内传入的数据

    opts：popover的选项

具体在说一下opts：它里面也有三个参数 cssClass：控制popover的样式（我一般不用，我都是直接去控制台在类名，直接控制）  showBackdrop：是否显示背景，默认为true（不用改，改了之后反而用不了）  enableBackdropDismiss：是否通过点击背景让盒子消失，默认为true（不用改，改了之后反而用不了）

完成上面的过程后，你就能够弹出一个页面了

然后就是弹出的页面的修改了

在弹出的页面中，内容尽量不要写在html文件中，最好写在ts的template中

如图：

然后修改样式就好了。

备注：在ts文件中进行类似与DOM操作的方法

var s = document.querySelector('.popover-content');括号中为class类名

s['style'].width = '190px'; 控制样式。