Angular CDK を使用してサービスポップアップトーストコンポーネント機能を実装する

'@angular/cdk/overlay' から OverlayModule をインポートします。

@Ngモジュール({
  宣言: [
    アプリコンポーネント
  ]、
  輸入: [
    ブラウザモジュール、
    オーバーレイモジュール
  ]、
  プロバイダー: [],
  ブートストラップ: [AppComponent]
})
クラス AppModule をエクスポートします { }

<div class="q-toast">
    <div class="q-toast-mask"></div>
    <p class="q-toast-msg">{{メッセージ}}</p>
</div>

.q-トースト{
  パディング: .2rem .5rem;
  幅: 5rem;
  位置: 相対的;
  ディスプレイ: フレックス;
  flex-direction: 行;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  

  .q-トーストマスク{
    位置: 絶対;
    上: 0;
    左: 0;
    右: 0;
    下部: 0;
    背景色: #000;
    不透明度: .8;
    境界線の半径: 2rem;
  }

  .q-トーストメッセージ{
    色: 白;
    zインデックス: 999;
  }
}

'@angular/cdk/overlay' から Overlay、OverlayConfig をインポートします。
'@angular/cdk/portal' から ComponentPortal をインポートします。
'@angular/core' から { Injectable、Inj​​ectionToken、Injector } をインポートします。
'./toast.component' から ToastComponent をインポートします。

@Injectable({
  提供元: 'root'
})
クラス ToastService をエクスポートします。

  コンストラクター(プライベートオーバーレイ: Overlay) { }

  表示(メッセージ: 文字列) {
    定数config = 新しいOverlayConfig();
    定数positionStrategy = this.overlay.position()
      .global().centerVertically().centerHorizo​​ntally();
    config.positionStrategy を設定します。
    overlayRef を this.overlay.create(config) とします。
    const inject = Injector.create({
      プロバイダー:
        {
          提供: Toast_Ref、
          使用値:オーバーレイ参照
        },
        {
          提供: Toast_Msg、
          使用値:メッセージ
        }
      ]
    })
    console.log(inject.get<文字列>(Toast_Ref))
    ComponentPortal を新しいものに置き換えます (ToastComponent、null、inject);
    overlayRef.attach(部分)
    タイムアウトを設定する(() => {
      オーバーレイRef.デタッチ()
      オーバーレイRef.dispose();
    }, 2000);
  }

}

エクスポート const Toast_Ref = new InjectionToken<{}>('Toast_Ref');
エクスポート const Toast_Msg = new InjectionToken<{}>('Toast_Msg');

クラスAppComponentをエクスポートします。
  コンストラクター(プライベートトースト:ToastService) {
  }
  テスト（） {

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