使用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组件的文章就介绍到这了,更多相关angular cdk 实现toast组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！