Angular CDK 를 사용 하여 Service 팝 업 Toast 구성 요소 기능 구현

Angular 에서 공식 팀 은 Material 구성 요소 라 이브 러 리 를 개발 하 는 동시에 Component dev kit,즉 Angular 세계 에서 유명한 CDK 를 만 들 었 다.이 도 구 는 매우 많은 전단 개발 의 유 니 버 설 기능 을 제공 했다.Angular 의 유명 구성 요소 라 이브 러 리 는 거의 이 개발 패키지 에 의존 하고 있다.ANT,PrimeNG 등 이다.
본 고 는 주로 cdk 로 간단 한 Toast 구성 요 소 를 실현 하고 cdk 의 overlay 모듈 을 사용 합 니 다.
1.환경 설치
cdk 는 angular 의 기본 모듈 이 아 닙 니 다.수 동 으로 설치 해 야 합 니 다yarn add @angular/cdkapp.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 ToastService 모델 만 들 기

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 만 루트 모듈 에 기본적으로 주입 합 니 다.Toast 를 꺼 내야 하 는 구성 요소 의 구조 방법 에 해당 하 는 ToastService 를 쓰 면 정상적으로 실 행 됩 니 다.

export class AppComponent {
  constructor(private toast:ToastService) {
  }
  test() {

    this.toast.Show('hello cdk!')
  }
}

gif 효과 도

Angular CDK 를 사용 하여 Service 팝 업 Toast 구성 요 소 를 구현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Angular CDK 구현 Toast 구성 요소 에 관 한 더 많은 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!