Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren

importiere { OverlayModule } von '@angular/cdk/overlay';

@NgModule({
  Erklärungen: [
    AppComponent
  ],
  Importe: [
    BrowserModule,
    OverlayModule
  ],
  Anbieter: [],
  Bootstrap: [Anwendungskomponente]
})
exportiere Klasse AppModule { }

<div Klasse="q-toast">
    <div Klasse="q-toast-mask"></div>
    <p class="q-toast-msg">{{msg}}</p>
</div>

.q-toast {
  Polsterung: .2rem .5rem;
  Breite: 5rem;
  Position: relativ;
  Anzeige: Flex;
  Flex-Richtung: Reihe;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  

  .q-toast-maske {
    Position: absolut;
    oben: 0;
    links: 0;
    rechts: 0;
    unten: 0;
    Hintergrundfarbe: #000;
    Deckkraft: .8;
    Randradius: 2rem;
  }

  .q-toast-msg {
    Farbe: weiß;
    Z-Index: 999;
  }
}

importiere { Overlay, OverlayConfig } von '@angular/cdk/overlay';
importiere { ComponentPortal } aus '@angular/cdk/portal';
importiere { Injectable, InjectionToken, Injector } von '@angular/core';
importiere { ToastComponent } aus './toast.component';

@Injizierbar({
  bereitgestelltIn: 'root'
})
Exportklasse ToastService {

  Konstruktor(privates Overlay: Overlay) { }

  Anzeigen(Nachricht: Zeichenfolge) {
    const config = neue OverlayConfig();
    const positionStrategy = this.overlay.position()
      .global().centerVertically().centerHorizontally();
    config.positionStrategy = Positionsstrategie;
    let overlayRef = this.overlay.create(config);
    const inject = Injektor.erstellen({
      Anbieter:
        {
          angeben: Toast_Ref,
          useValue:overlayRef
        },
        {
          geben Sie ein: Toast_Msg,
          Wert verwenden:msg
        }
      ]
    })
    Konsole.log(inject.get<string>(Toast_Ref))
    let partal = neues ComponentPortal(ToastComponent, null, inject);
    overlayRef.attach(teilweise)
    setzeTimeout(() => {
      overlayRef.detach()
      overlayRef.dispose();
    }, 2000);
  }

}

exportiere const Toast_Ref = neues InjectionToken<{}>('Toast_Ref');
exportiere const Toast_Msg = neues InjectionToken<{}>('Toast_Msg');

exportiere Klasse AppComponent {
  Konstruktor(privater Toast:ToastService) {
  }
  prüfen() {

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