ionic3封装自定义Toast（添加图标）

Toast中文翻译

如果想往Toast里加点其他东西呢？看到一些实现：

1.修改源码
2.引入其他库（来自晴天大佬： https://www.jianshu.com/p/17ab4003fa18）

出于学习，我自己封装了一下，自己封装的更自由，想怎么改就怎么改。
如有错误，请大佬们斧正，蟹蟹蟹。。。

（1）创建

先创建组件：

ionic g component custom-toast

打开custom-toast.html：

<div class="custom-toast"  *ngIf="active">
  <div>
      {{ message }}
  </div>
</div>

打开ts文件，添加两句：

active: boolean = true;
message: string = '自定义Toast';

然后写点样式：

.custom-toast {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 56px;
        color: #fff;
        background-color: black;
        border-radius: 10px 10px;
        z-index: 100;
        opacity: 0.9;
        line-height: 56px;
        text-align: center
    }

然后把它放到哪里呢？
打开app.html：

刷新浏览器，如无意外，Toast将是这样的：

无论去到哪个页面，它都会显示，因为它是放在了app.html中的。

（2）显示与隐藏

接下来，就是控制它如何显示与隐藏了

我们可以在任何一个页面获取到它，然后直接在这个页面显示或隐藏它，但这就意味着无封装性可言了。

在组件的ts文件中：
先隐藏Toast：

active: boolean = false;

定义显示的函数：

show(message, duration) {
 
    this.message = message;
    this.active = true;

    setTimeout(() => {
          this.active = false;
    }, duration);
  }

如何在其他页面让Toast组件自己调用的这个方法呢？
component中的方法不能随时随地调用，在页面中ViewChild获取不到；id不靠谱；new出来可以调用，但却没反应。

发布订阅事件也许可以，但这里用provider来实现。

先创建一个provider：

ionic g provider custom-toast

然后我们在provider中定义一个函数：

show(message, duration) {

}

回到Toast组件的ts文件，写入：

import { CustomToastProvider } from './../../providers/custom-toast/custom-toast';
...
constructor(private customToast: CustomToastProvider) {
    this.customToast.show = this.show.bind(this);
}

这样provider中的show方法就绑定了组件中的show，provider随处可用，那意味着组件中的show也将随处可用！

（3）使用：

在任意一个页面中导入

import { CustomToastProvider } from './../../providers/custom-toast/custom-toast';
...
constructor(private customToast: CustomToastProvider) { }

testToast() {
    this.customToast.show('自定义Toast', 2000);
 }

页面模板中触发：

<button ion-button (click)="testToast()">Show Toast</button>

（4）动画：

在组件的.scss中写入：

// 先把.custom-toast中的top改为:
    top: -60px;

// 定义样式的时候要小心：hide，show是内置样式！hide，show是内置样式！hide，show是内置样式！
    .my-show {
        animation: my-toast-show .2s ease-in-out forwards;
    }

    .my-hide {
        animation: my-toast-hide .2s ease-in-out forwards;
    }
    @keyframes my-toast-show {
        from { top: -60px; }
        to { top: 0 }
    }

    @keyframes my-toast-hide {
        from { top: 0 }
        to { top: -60px; } 
    }
// 样式大致的就是触发show方法后：
// toast向上滑出，duration时间后，向上滑走。
// ng动画也可以实现，但那个更麻烦

绑定到模板，最终的模板：

<div class="custom-toast" *ngIf="active" [class.my-show]="active" [class.my-hide]="myHide">
  <div>
      {{ message }}
  </div>
</div>

修改组件ts文件：

//  定义隐藏动画的变量
myHide = false;

...

show(message, duration) {
 
    this.message = message;
    this.active = true;

    setTimeout(() => {
        this.myHide = true;
        setTimeout(() => {
          this.myHide = false;  
          this.active = false;
        }, 200)  // 隐藏动画完后再移除
    }, duration);
  }

最后，效果上就是与原来的toast一样。
但我们现在可以在这个基础上修改模板，修改样式，增加动画，任意扩展了！