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结构型指令模块和样式)
- angularjs过滤器
- angular封装公共组件(详解Angular组件之生命周期二)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- angular简单介绍(详解Angular依赖注入)
- angular组件化(详解Angular父子组件通讯)
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
- angular路由树(详解Angular路由之子路由)
- vue react和angular(详解React Angular Vue三大前端技术)
- angular使用方法(Angular环境搭建及简单体验小结)
- angular快速创建模块指令(详解Angular项目中共享模块的实现)
- angular教程第九讲(浅谈Angular的12个经典问题)
- angular引入组件库(详解Angular组件之中间人模式)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- angular怎么把组件用在根组件里(详解Angular组件之投影)
- angular 常用模块(详解Angular之路由基础)
- 景区游玩,这些安全知识要牢记(这些安全知识要牢记)
- 各地出招烘 热 旅游(各地出招烘热旅游)
- 2021款起亚霸锐到店了 更换车标,竞争宝马X5有戏吗(2021款起亚霸锐到店了)
- 新款起亚霸锐实拍,比普拉多气派,配3.0T V6,引入国内或许能大卖(新款起亚霸锐实拍)
- ()
- 张勇 阿里新任掌门人(阿里新任掌门人)
热门推荐
- dedecms增加导航内容(dedecms中将系统的data目录迁移到web以外目录)
- Ext.slider控件的用法
- thinkphp框架实例(ThinkPHP框架整合微信支付之JSAPI模式图文详解)
- 云主机越来越受欢迎吗(云主机的发展前景怎样?会成为主流吗?)
- phpredis怎么设置队列(php使用lua+redis实现限流,计数器模式,令牌桶模式)
- SqlServer索引的原理与应用详解(SqlServer索引的原理与应用详解)
- springboot怎么用docker(使用docker部署spring boot并接入skywalking的方法)
- php逐行读写文件(PHP实现读取文件夹及批量重命名文件操作示例)
- dedecms上传附件大小限制(dedecms删除文章同时也删除附件的修改方法)
- opencv人脸识别算法(python利用Opencv实现人脸识别功能)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9