angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
类别:编程学习 浏览量:2847
时间:2021-10-01 01:08:01 angular怎么创建声明
使用Angular CDK实现一个Service弹出Toast组件功能目录
- 1.环境安装
- 2.创建Toast组件和ToastService
- 2.1编写Toast组件和样式
在Angular中,官方团队在开发Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中大名鼎鼎的CDK,这套工具包提供了非常多的前端开发的通用功能。Angular的知名组件库几乎都依赖了这套开发包。比如ANT,PrimeNG等。
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块。
1.环境安装cdk不是angular的默认模块,需要手动安装 yarn add @angular/cdk
在app.module中引入cdk中的OverlayModule
import { OverlayModule } from '@angular/cdk/overlay'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, OverlayModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- 使用
ng g c Toast
命令快速创建一个组件模版 - 使用
ng g s Toast
创建一个Service的模版
2.1编写Toast组件和样式
ToastComponent
<li class="q-toast"> <li class="q-toast-mask"></li> <p class="q-toast-msg">{{msg}}</p> </li> .q-toast { padding: .2rem .5rem; width: 5rem; position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; .q-toast-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: .8; border-radius: 2rem; } .q-toast-msg { color: white; z-index: 999; } }
ToastService
import { Overlay, OverlayConfig } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; import { Injectable, InjectionToken, Injector } from '@angular/core'; import { ToastComponent } from './toast.component'; @Injectable({ providedIn: 'root' }) export class ToastService { constructor(private overlay: Overlay) { } Show(msg: string) { const config = new OverlayConfig(); const positionStrategy = this.overlay.position() .global().centerVertically().centerHorizontally(); config.positionStrategy = positionStrategy; let overlayRef = this.overlay.create(config); const inject = Injector.create({ providers: [ { provide: Toast_Ref, useValue: overlayRef }, { provide: Toast_Msg, useValue: msg } ] }) console.log(inject.get<string>(Toast_Ref)) let partal = new ComponentPortal(ToastComponent, null, inject); overlayRef.attach(partal) setTimeout(() => { overlayRef.detach() overlayRef.dispose(); }, 2000); } } export const Toast_Ref = new InjectionToken<{}>('Toast_Ref'); export const Toast_Msg = new InjectionToken<{}>('Toast_Msg');
使用Toast
编写好Service后,只需要Angular会默认注入到root模块,只需要在需要弹出Toast的组件的构造方法写上对应的ToastService就可以正常运行了。
export class AppComponent { constructor(private toast:ToastService) { } test() { this.toast.Show('hello cdk!') } }
到此这篇关于使用Angular CDK实现一个Service弹出Toast组件的文章就介绍到这了,更多相关Angular CDK 实现Toast组件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- angular封装公共组件(详解Angular组件之生命周期二)
- angular开发详解(详解Angular组件生命周期一)
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- angular模块的组成(详解Angular结构型指令模块和样式)
- angular引入组件库(详解Angular组件之中间人模式)
- angular封装进度条组件(如何用DevUI搭建自己的Angular组件库)
- angular快速创建模块指令(详解Angular项目中共享模块的实现)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- angular简单介绍(详解Angular依赖注入)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- angular教程第九讲(浅谈Angular的12个经典问题)
- angular定义一个管道(Angular管道PIPE的介绍与使用方法)
- angularjs过滤器
- vue react和angular(详解React Angular Vue三大前端技术)
- angular组件化(详解Angular父子组件通讯)
- 人从众 火炎焱 全椒再现 正月十六走太平 的魅力(人从众火炎焱全椒再现)
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
- NVIDIA显卡份额冲上88 A饭发愁 游戏优化恐没A卡份了(NVIDIA显卡份额冲上88A饭发愁)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
热门推荐
- mysql统计函数详解(浅析MySQL的基数统计)
- python中赋值语句规则(Python动态赋值的陷阱知识点总结)
- nginx怎么配置静态文件(Nginx 过滤静态资源文件的访问日志的实现)
- css代码使用方法(写出牛逼的CSS代码13条建议你会哪几条)
- javascript动作事件有哪些(JavaScript之事件循环案例讲解)
- laravel 表单验证图片(Laravel 自动生成验证的实例讲解:login / logout)
- dedecms 标签通用(DEDECMS标签循环调用 去掉最后一个循环符号的代码)
- C# 文件压缩与解压
- 织梦tag标签怎样设置(织梦dede修改关键字长度的方法)
- 怎么实现显示用户浏览过的历史记录