让我们使用Angular CDK来制作toast吧！第一部分

终极目标

本文使用Angular CDK的overlay来创建一个可以指定消息和显示时间的toast（实时示例）。完成后，我本来以为这是一个snack-bar，但是觉得改名字太麻烦了，所以在这里我们将它称为toast。

阅读这篇出色的文章，可以了解有关CDK本身或CDK叠加的内容。了解Angular Component Dev Kit 的基础知识。

这篇文章介绍的内容

准备好

在使用Angular CLI创建了新项目之后，需要准备CDK和动画库以实现toast的显示效果。进行库的安装。

npm i @angular/cdk

将 app.module 中导入

import { OverlayModule} from '@angular/cdk/overlay';
import { PortalModule} from '@angular/cdk/portal';
// animationはこの記事ではまだ使いませんが、後々使います！
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

...

@NgModule({
  imports:      [... , OverlayModule, PortalModule, BrowserAnimationsModule ],

导入用于覆盖的CSS文件。

@import "~@angular/cdk/overlay-prebuilt.css";

创建toast组件（overlay的内容）

我将创建一个作为toast显示的组件。

ng generate component toast

将toast组件动态加载，而不是从模板直接调用，因此需要将其注册到entryComponents中。

@NgModule({
...
entryComponents: [ToastComponent]
})

覆盖层的显示

让我们立刻显示Toast组件。

import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

import { ToastComponent } from './toast/toast.component';

...

constructor(private overlay: Overlay){ }

  open() {
    const overlayRef = this.overlay.create();
    overlayRef.attach(new ComponentPortal(ToastComponent))
  }

<button (click)="open()">いでよトースト</button>

点击“来吧吐司”按钮后，左上角会出现’tast works!’这个字样。
然而，由于按钮的遮挡，它变得不太清晰。先给背景和文字上色吧。

:host {
  background-color: black;
  color: white;
}

由于位置不佳，接下来将其更改为与最终目标相同的屏幕底部中央位置。
通过将OverlayConfig类的实例传递给overlay.create()函数的参数，可以指定位置。
OverlayConfig还有其他可设置的项目，但目前只设置与显示位置相关的positionStrategy。

import { Overlay, OverlayConfig } from '@angular/cdk/overlay';

...

open() {
  const config = new OverlayConfig({
    // 表示位置に関する設定
    positionStrategy: 
      // 画面全体に対して水平方向は中心・垂直方向は下から5%のところに
      this.overlay.position().global().centerHorizontally().bottom('5%'),
});
  const overlayRef = this.overlay.create(config);

...
}

点击”いでよトースト”，会显示出类似于吐司的东西！

干杯图标隐藏

因为不能一直显示着，所以让toast在2秒后消失。

    ...
    overlayRef.attach(new ComponentPortal(ToastComponent));

    setTimeout(() => {
      overlayRef.detach();
    }, 2000);
    ...

用这个，吐司会瞬间消失。

下次回合

暂时做出了类似吐司的东西，但是没有动画效果。
下次会添加从屏幕底部出现或收回的动画！