通过脚本来显示message

使用场景

  • message是一个全局组件,当使用的时候。并不希望要在模板里添加message模板。
  • 希望可以通过类似的代码来做到如此效果。this.messageService.error('test1')来显示一个message

实现的步骤

  1. 方法一( 最不好用)
    通过依赖注入的document https://angular.cn/api/common/DOCUMENT获取document,然后通过淳朴的dom操作来添加message.
  2. 方法2(实装起来比较繁琐,而且不够自动化)
    在根组件里依赖注入ViewContainerRef,然后把ViewContainerRef注册到message服务里去。后面调用message服务时,相当于动态添加组件。https://angular.cn/guide/dynamic-component-loader
  3. 方法3 (参考的ng-zorro https://ng.ant.design/components/message/zh
    此方法够自闭,不会污染其他页面代码。但是实现比上面麻烦。
    1. 首先得获取applicationRef https://angular.cn/api/core/ApplicationRef
    2. 构建一个容器,把容器视图挂载到applicationRef上
    3. 后面的显示message相当于添加视图到这个容器里
    4. 具体实现看https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/message/nz-message-base.service.ts
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 已经开学一周了,这一周,每天早上五点起床,,5点20出门,中午12点30分在校门口匆匆吃饭,下午6点10分晚饭也在...
    月残风阅读 280评论 0 0
  • 國峰老师tips:提醒一下大家:這星期不用太在意訓練的數據,怎麼輕鬆怎麼跑,配速/步頻/心率都先不用去想它。輕鬆完...
    himeteora阅读 447评论 0 0
  • 小时候,老师总爱问,“你的理想是什么?”那时候的我,很单纯地就破口而出“我要当一名教师!”所以,小时候,我最爱...
    九月尔阅读 240评论 0 0
  • 回到宿舍,终于没有了训练场上人人自危的死一般的寂静,大家能够放松一下紧绷的神经。我被分到了三班。当我把一大堆行李物...
    原来我是小书童阅读 348评论 0 2
  • 二三十年前如果有一技之长就能一辈子有铁饭碗,比如在银行工作是个好职业不仅工资高工作环境也好,但今天看来原来的技能有...
    理书侠阅读 335评论 0 0

友情链接更多精彩内容