由于原本的小弹框toast在极限操作的情况下会出现悬停不消失，所以我们自定义一个toast

html：

<div class="toast" *ngIf="showtoast">{{toastmessage}}</div>

css:

.toast {
    z-index: 9000;
    position: fixed;
    width: 90%;
    border-radius: 3px;
    top: 50%;
    left: 5%;
    height: 3em;
    line-height: 3em;
    margin-top: -1.5em;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    text-align: center;
}

TS:

presentToast(msg) {
    this.showtoast = true;
    this.toastmessage = msg;
    setTimeout(() => {
        this.toastmessage = "";
        this.showtoast = false;
    }, 1000);
}

用ngif控制toast是否显示

传进一个参数来动态绑定。

可能没啥难的，就是记录一下