在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效果圖

最後

歡迎大家關注我的公眾號【青城同學】和我交流