使用Angular CDK实现一个Service弹出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 { }
2.创建Toast组件和ToastService
- 使用
ng g c Toast
命令快速创建一个组件模版 - 使用
ng g s Toast
创建一个Service的模版
2.1编写Toast组件和样式
ToastComponent
<div class="q-toast">
<div class="q-toast-mask"></div>
<p class="q-toast-msg">{{msg}}</p>
</div>
.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!')
}
}
gif效果图
最后
欢迎大家关注我的公众号【青城同学】和我交流
使用Angular CDK实现一个Service弹出Toast组件的更多相关文章
- 第一个微信小程序(实现点击一个按钮弹出toast)
今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss ...
- easyDialog 简单、实用的弹出层组件
easyDialog 简单.实用的弹出层组件 使用背景 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的.最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找 ...
- Angular 10材质的模态弹出示例和教程
在本教程中,我们将通过示例使用Angular 10材质构建模式弹出窗口. 在这里,我们将研究创建Angular 10项目,安装和设置Angular 10材质,以及创建自定义材质模块文件. 在本教程中, ...
- 点击一个超链接,弹出固定大小的新窗口(js实现)
1.最基本的弹出窗口代码 <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> ...
- 一步步编写avalon组件01:弹出层组件
avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...
- zepto弹出层组件
html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...
- 小巧、高效、美观的弹出日历组件 ——lhgcalendar
http://www.cnblogs.com/lhgstudio/archive/2009/02/13/1390381.html 没法上传附件,请到以上地址下载 下载地址:http://files.c ...
- Android开发遇到手机无法弹出Toast
今天遇到了一个很奇怪的问题,一个很简单的程序,就是点击按钮弹出一个Toast,但在手机上运行起来,却没有正常弹出Toast 第一反应就是看看是否调用了show方法,很显然,并不是这个低级问题,为了确定 ...
- 关于隐式创建vue实例实现简化弹出框组件显示步骤
我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...
随机推荐
- halcon——缺陷检测常用方法总结(特征训练)
引言 机器视觉中缺陷检测分为一下几种: blob分析+特征 模板匹配(定位)+差分:halcon--缺陷检测常用方法总结(模板匹配(定位)+差分) - 唯有自己强大 - 博客园 (cnblogs.co ...
- 性能分析之CPU分析-从CPU调用高到具体代码行(C/C++)
今天在培训的过程中,也提到了分析要具体到代码的事情,如果思路方向是正确的,对java应用和C/C++应用来说,也是几个命令就可以跳到代码行了.前提是要能看得懂堆栈信息.所以一直以来我在讲课的过程中都有 ...
- 实验7、Django VS Flask VS Node:如何选择
实验介绍 1. 实验内容 在本教程中,我们将详细介绍Django和Flask之间的比较.Flask和Django是基于Python的Web开发框架.许多正在朝着轻型微框架发展.这些框架敏捷,灵活,小巧 ...
- 利用 Bean Validation 来简化接口请求参数校验
团队新来了个校招实习生静静,相互交流后发现竟然是我母校同实验室的小学妹,小学妹很热情地认下了我这个失散多年的大湿哥,后来... 小学妹:大湿哥,咱们项目里的 Controller 怎么都看不到参数校验 ...
- docker安装及卸载
docker基本组成 镜像(image): docker镜像好比一个模板,可以通过这个模板创建容器服务,例如:tomcat镜像===>run===>tomcat01容器(提供服务器) 通过 ...
- 【题解】[LuoguP3503]「BZOJ2086」[POI2010] Blocks
题目描述 给出N个正整数a[1..N],再给出一个正整数k,现在可以进行如下操作:每次选择一个大于k的正整数a[i],将a[i]减去1,选择a[i-1]或a[i+1]中的一个加上1.经过一定次数的操作 ...
- 温故知新,.Net Core遇见Postman(API Development),进阶分布式微服务高效调式
什么是Postman 环境变量(Environments) 全局协议 描述 变量 初始值 当前值 请求协议 request_protocol http http 授权信息 描述 变量 初始值 当前值 ...
- 自然语言处理(NLP)——简介
自然语言处理(NLP Natural Language Processing)是一种专业分析人类语言的人工智能.就是在机器语⾔和⼈类语言之间沟通的桥梁,以实现人机交流的目的. 在人工智能出现之前,机器 ...
- 用Spingboot获得微信小程序的Code以及openid和sessionkey
这篇文章主要写的是怎么用spingboot来获取微信小程序的Code以及openid和sessionke,我觉得已经很详细了 我们要获得openid和sessionkey,就必须先要获得code, ...
- JDBC:MySQL5.x 与 MySQL8.x
jar包下载地址: https://dev.mysql.com/downloads/connector/j/ 或者 :http://central.maven.org/maven2/mysql/mys ...