动态创建Angular组件实现popup弹窗功能

 更新时间:2017年09月15日 08:31:28   投稿:mrr  
这篇文章主要介绍了动态创建angular组件实现popup弹窗,需要的朋友可以参考下

起步: 直接使用ngIf

把弹窗的DOM直接放在页面底下隐藏,通过ngIf这样的指令控制其显示。

改进: 封装成angular模块,通过服务控制其显示

直接使用ngIf的话,让人不爽的地方就在于不够通用,每个页面都得加DOM。改进的话可以把比较通用的一些DOM封装成组件,统一添加到全局页面中,并将显示的控制交给一个angular服务来控制其显示。

比如定义了两个组件(DialogComponent, AlertComponent),将他们都添加到AppComponent下,然后提供一个PopupService来控制组件的显示,并支持传递参数进去。

仅通过控制显示的方式仍不够通用且存在耦合

将弹窗组件封装然后使用服务来控制显示的方法看上去已经比较通用了,不过还存在两个尴尬的问题:

  1. 仍然需要在页面的某个地方放置一个弹窗组件,比如叫做PopupComponent,此组件负责渲染出默认隐藏的一些通用弹窗子组件,才能进行显示控制实现弹窗能力。
  2. 如果想要弹出一个自定义窗口的话就只能回到最上面另外写DOM放到需要弹出自定义弹窗的位置上,或者将自定义的标签通过innerHtml指令传入(富文本方式)。

由此可见这样的弹窗能力并没有做到非常通用,且必须手动放置弹窗插座(姑且这么叫)以致多了一处耦合。

动态创建弹窗

最理想的方式应该是: 在想要弹个窗口出来时直接一行代码把窗口弹出来,不用事先在哪里先把这个弹窗写好(或者说这一步不应该由弹窗控件的使用者来做,弹窗控件应该要自动完成这件事)。

而这一能力就涉及到angular的动态创建组件的能力了。

官网给出的用法

angular的官方文档中就有关于动态创建组件的用法。不过其使用的是ViewContainerRef服务,此服务提供了createComponent方法来在指定的视图容器下动态创建一个组件出来。

不过ViewContainerRef的尴尬点是只能在具体的指令、组件中使用,也就是说,必须告诉它打算在哪个地方创建新组建,这不还是需要实现创建好一个“弹窗插座”出来,才可以在这个“插座”中动态创建组件。

那有什么办法可以不给定视图容器而创建出组建来,通俗地讲问题就是: 不是在指令或者组件中创建组件,而是在服务中创建出组件,还要让这个组件显示到页面上去。

组建工厂——组件真正的创建者

在组件中创建组件的核心代码分两步:

创建组件工厂

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(待创建组件);

把工厂提供给容器创建出组件

let componentRef = viewContainerRef.createComponent(componentFactory);

现在的问题在于,在服务中得不到viewContainerRef,工厂倒是能创建成功。

其实有工厂了已经足够了,查看componentFactory提供的成员里面包含了一个create方法,顾名思义这应该就是用来创建组件的了。

create方法有个必选参数类型为Injector,顾名思义就是注入器,即这个创建的组件打算注入些什么服务进去,暴力点直接写null也没问题。

直接使用工厂创建组件返回的同样是一个ComponentRef类型的引用,可见此时组件确实是创建出来了,但是还没有将其插入到视图中去。此时可以再暴力一点,直接用原生DOM操作插入到body标签的末尾去:

window.document.body.appendChild(
  this.getComponentRootNode(componentRef)
);
this.appRef.attachView(componentRef); // 注入ApplicationRef服务后使用
// ...
private getComponentRootNode(componentRef: ComponentRef<any>): HTMLElement {
  return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
}
// ...

此办法是笔者从Material2的茫茫源代码中找到的,Google自己都直接这么插,那就放心使用了。这里不得不赞叹Material2中Dialog模块的实现,实在是有够复杂。

总结

本文主要在讲思路,扯到最后才开始要进入主题来动态创建组件,不过仅仅是创建出组件并添加到DOM中去还只是第一步,一个健壮的弹窗模块(Material2那样的)还得有一套完善的交互能力,比如弹出和关闭时的订阅和传值,这些就要通过注入服务到组件中来实现了,限于篇幅将在下一篇文章中回归实际实现一个通过动态创建组件实现的弹窗模块出来。

以上所述是小编给大家介绍的动态创建Angular组件实现popup弹窗功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • AngularJS内置指令

    AngularJS内置指令

    这篇文章主要详细介绍了AngularJS内置指令的使用方法,非常详细,常用的一些指令操作都做了总结,有需要的小伙伴参考下
    2015-02-02
  • AngularJS 工作原理详解

    AngularJS 工作原理详解

    本文主要介绍AngularJS 工作原理,这里整理了相关资料及示例代码,有兴趣的小伙伴可以参考下
    2016-08-08
  • Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-03-03
  • angularjs 获取默认选中的单选按钮的value方法

    angularjs 获取默认选中的单选按钮的value方法

    下面小编就为大家分享一篇angularjs 获取默认选中的单选按钮的value方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 利用Jasmine对Angular进行单元测试的方法详解

    利用Jasmine对Angular进行单元测试的方法详解

    单元测试是一种能够帮助开发者验证代码中某一部分有效性的技术。下面这篇文章主要给大家介绍了关于利用Jasmine对Angular进行单元测试的相关资料,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-06-06
  • angularjs+bootstrap菜单的使用示例代码

    angularjs+bootstrap菜单的使用示例代码

    本篇文章主要介绍了angularjs+bootstrap菜单的使用示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • Angular 2父子组件数据传递之@ViewChild获取子组件详解

    Angular 2父子组件数据传递之@ViewChild获取子组件详解

    这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@ViewChild获取子组件的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 详解angular中使用echarts地图

    详解angular中使用echarts地图

    这篇文章主要为大家介绍了angular中使用echarts地图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Angular跨字段验证器中如何直接调用其它独立的验证器

    Angular跨字段验证器中如何直接调用其它独立的验证器

    我们在开发的时候都会用到表单,那么验证器就是必不可少的东西,这篇文章主要给大家介绍了关于在Angular跨字段验证器中如何直接调用其它独立的验证器的相关资料,需要的朋友可以参考下
    2022-03-03
  • AngularJS读取JSON及XML文件的方法示例

    AngularJS读取JSON及XML文件的方法示例

    这篇文章主要介绍了AngularJS读取JSON及XML文件的方法,涉及AngularJS针对xml及json格式文件数据的读取、遍历、输出等相关操作技巧,需要的朋友可以参考下
    2017-05-05

最新评论