在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组件的更多相关文章

  1. 第一个微信小程序(实现点击一个按钮弹出toast)

    今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss ...

  2. easyDialog 简单、实用的弹出层组件

    easyDialog 简单.实用的弹出层组件 使用背景 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的.最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找 ...

  3. Angular 10材质的模态弹出示例和教程

    在本教程中,我们将通过示例使用Angular 10材质构建模式弹出窗口. 在这里,我们将研究创建Angular 10项目,安装和设置Angular 10材质,以及创建自定义材质模块文件. 在本教程中, ...

  4. 点击一个超链接,弹出固定大小的新窗口(js实现)

    1.最基本的弹出窗口代码 <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> ...

  5. 一步步编写avalon组件01:弹出层组件

    avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...

  6. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  7. 小巧、高效、美观的弹出日历组件 ——lhgcalendar

    http://www.cnblogs.com/lhgstudio/archive/2009/02/13/1390381.html 没法上传附件,请到以上地址下载 下载地址:http://files.c ...

  8. Android开发遇到手机无法弹出Toast

    今天遇到了一个很奇怪的问题,一个很简单的程序,就是点击按钮弹出一个Toast,但在手机上运行起来,却没有正常弹出Toast 第一反应就是看看是否调用了show方法,很显然,并不是这个低级问题,为了确定 ...

  9. 关于隐式创建vue实例实现简化弹出框组件显示步骤

    我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...

随机推荐

  1. halcon——缺陷检测常用方法总结(特征训练)

    引言 机器视觉中缺陷检测分为一下几种: blob分析+特征 模板匹配(定位)+差分:halcon--缺陷检测常用方法总结(模板匹配(定位)+差分) - 唯有自己强大 - 博客园 (cnblogs.co ...

  2. 性能分析之CPU分析-从CPU调用高到具体代码行(C/C++)

    今天在培训的过程中,也提到了分析要具体到代码的事情,如果思路方向是正确的,对java应用和C/C++应用来说,也是几个命令就可以跳到代码行了.前提是要能看得懂堆栈信息.所以一直以来我在讲课的过程中都有 ...

  3. 实验7、Django VS Flask VS Node:如何选择

    实验介绍 1. 实验内容 在本教程中,我们将详细介绍Django和Flask之间的比较.Flask和Django是基于Python的Web开发框架.许多正在朝着轻型微框架发展.这些框架敏捷,灵活,小巧 ...

  4. 利用 Bean Validation 来简化接口请求参数校验

    团队新来了个校招实习生静静,相互交流后发现竟然是我母校同实验室的小学妹,小学妹很热情地认下了我这个失散多年的大湿哥,后来... 小学妹:大湿哥,咱们项目里的 Controller 怎么都看不到参数校验 ...

  5. docker安装及卸载

    docker基本组成 镜像(image): docker镜像好比一个模板,可以通过这个模板创建容器服务,例如:tomcat镜像===>run===>tomcat01容器(提供服务器) 通过 ...

  6. 【题解】[LuoguP3503]「BZOJ2086」[POI2010] Blocks

    题目描述 给出N个正整数a[1..N],再给出一个正整数k,现在可以进行如下操作:每次选择一个大于k的正整数a[i],将a[i]减去1,选择a[i-1]或a[i+1]中的一个加上1.经过一定次数的操作 ...

  7. 温故知新,.Net Core遇见Postman(API Development),进阶分布式微服务高效调式

    什么是Postman 环境变量(Environments) 全局协议 描述 变量 初始值 当前值 请求协议 request_protocol http http 授权信息 描述 变量 初始值 当前值 ...

  8. 自然语言处理(NLP)——简介

    自然语言处理(NLP Natural Language Processing)是一种专业分析人类语言的人工智能.就是在机器语⾔和⼈类语言之间沟通的桥梁,以实现人机交流的目的. 在人工智能出现之前,机器 ...

  9. 用Spingboot获得微信小程序的Code以及openid和sessionkey

    ​ 这篇文章主要写的是怎么用spingboot来获取微信小程序的Code以及openid和sessionke,我觉得已经很详细了 我们要获得openid和sessionkey,就必须先要获得code, ...

  10. JDBC:MySQL5.x 与 MySQL8.x

    jar包下载地址: https://dev.mysql.com/downloads/connector/j/ 或者 :http://central.maven.org/maven2/mysql/mys ...