• 售前

  • 售后

热门帖子
入门百科

使用Angular CDK实现一个Service弹出Toast组件功能

[复制链接]
luly靓 显示全部楼层 发表于 2021-8-14 14:49:12 |阅读模式 打印 上一主题 下一主题
目录


  • 1.情况安装
  • 2.创建Toast组件和ToastService

    • 2.1编写Toast组件和样式

在Angular中,官方团队在开辟Material组件库的同时,顺手做了一套Component dev kit,也就是在Angular世界中台甫鼎鼎的CDK,这套工具包提供了非常多的前端开辟的通用功能。Angular的着名组件库险些都依赖了这套开辟包。好比ANT,PrimeNG等。
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块。

1.情况安装

cdk不是angular的默认模块,须要手动安装
  1. yarn add @angular/cdk
复制代码
在app.module中引入cdk中的OverlayModule
  1. import { OverlayModule } from '@angular/cdk/overlay';
  2. @NgModule({
  3.   declarations: [
  4.     AppComponent
  5.   ],
  6.   imports: [
  7.     BrowserModule,
  8.     OverlayModule
  9.   ],
  10.   providers: [],
  11.   bootstrap: [AppComponent]
  12. })
  13. export class AppModule { }
复制代码
2.创建Toast组件和ToastService

       
  • 使用
    1. ng g c Toast
    复制代码
    下令快速创建一个组件模版   
  • 使用
    1. ng g s Toast
    复制代码
    创建一个Service的模版

2.1编写Toast组件和样式

ToastComponent
  1. <div class="q-toast">
  2.     <div class="q-toast-mask"></div>
  3.     <p class="q-toast-msg">{{msg}}</p>
  4. </div>
  5. .q-toast {
  6.   padding: .2rem .5rem;
  7.   width: 5rem;
  8.   position: relative;
  9.   display: flex;
  10.   flex-direction: row;
  11.   align-items: center;
  12.   justify-content: center;
  13.   
  14.   .q-toast-mask {
  15.     position: absolute;
  16.     top: 0;
  17.     left: 0;
  18.     right: 0;
  19.     bottom: 0;
  20.     background-color: #000;
  21.     opacity: .8;
  22.     border-radius: 2rem;
  23.   }
  24.   .q-toast-msg {
  25.     color: white;
  26.     z-index: 999;
  27.   }
  28. }
复制代码
ToastService
  1. import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
  2. import { ComponentPortal } from '@angular/cdk/portal';
  3. import { Injectable, InjectionToken, Injector } from '@angular/core';
  4. import { ToastComponent } from './toast.component';
  5. @Injectable({
  6.   providedIn: 'root'
  7. })
  8. export class ToastService {
  9.   constructor(private overlay: Overlay) { }
  10.   Show(msg: string) {
  11.     const config = new OverlayConfig();
  12.     const positionStrategy = this.overlay.position()
  13.       .global().centerVertically().centerHorizontally();
  14.     config.positionStrategy = positionStrategy;
  15.     let overlayRef = this.overlay.create(config);
  16.     const inject = Injector.create({
  17.       providers: [
  18.         {
  19.           provide: Toast_Ref,
  20.           useValue: overlayRef
  21.         },
  22.         {
  23.           provide: Toast_Msg,
  24.           useValue: msg
  25.         }
  26.       ]
  27.     })
  28.     console.log(inject.get<string>(Toast_Ref))
  29.     let partal = new ComponentPortal(ToastComponent, null, inject);
  30.     overlayRef.attach(partal)
  31.     setTimeout(() => {
  32.       overlayRef.detach()
  33.       overlayRef.dispose();
  34.     }, 2000);
  35.   }
  36. }
  37. export const Toast_Ref = new InjectionToken<{}>('Toast_Ref');
  38. export const Toast_Msg = new InjectionToken<{}>('Toast_Msg');
复制代码
使用Toast
编写好Service后,只须要Angular会默认注入到root模块,只须要在须要弹出Toast的组件的构造方法写上对应的ToastService就可以正常运行了。
  1. export class AppComponent {
  2.   constructor(private toast:ToastService) {
  3.   }
  4.   test() {
  5.     this.toast.Show('hello cdk!')
  6.   }
  7. }
复制代码
gif效果图

到此这篇关于使用Angular CDK实现一个Service弹出Toast组件的文章就介绍到这了,更多干系Angular CDK 实现Toast组件内容请搜刮脚本之家以前的文章或继续浏览下面的干系文章盼望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作