ionic4 未读消息提示

问题

1.在我的页面，模仿微信，qq进行消息提示
2.利用ionic框架

学习

1.之前在很多地方查询实现方法，发现如下解决办法

<ion-tabs>
     <ion-tab tabTitle="首页" tabIcon="home" tabBadge="12" tabBadgeStyle="danger">
     </ion-tab>
</ion-tabs>

//如果进行数据绑定
<ion-tabs>
     <ion-tab tabTitle="首页" tabIcon="home" tabBadge="{{tip}}" tabBadgeStyle="danger">
     </ion-tab>
</ion-tabs>
ts:
import {Events} from 'ionic-angular';
export class TabsPage{
     tip:number =0；
     constructor （public event:Event）{
         this.events.subscribe('tip:change',(number)=>{
            this.tip=number
         })
     }
}

2.ionic4升级后发现有一个默认绑定方法

<ion-item (click)="gotoMyApplication()">
        <ion-icon slot="start" style="color:#FF6EB4" name="megaphone"></ion-icon>
        <ion-label >我的申请</ion-label>
        <!--可以直接显示提示消息-->
        <ion-badge  style="color:white;background-color: red" >9</ion-badge>
        <!--可以通过双向绑定来显示提示信息-->
         <ion-badge  style="color:white;background-color: red" >{{number}}</ion-badge>
 </ion-item>
 //如果显示的信息为0，也还是会有提示，只有没有值或为空的时候提示信息才会消失

显示：

3.也可以自己手动在css页面设计样式，只显示红点，不提示数字

html:
<ion-label>我<i class="tip" id="red"></i></ion-label>
css:
.tip{
    display:block;
    background:#f00;
    border-radius:50%;
    width:8px;
    height:8px;
     top:7px;
    right:25px;
    position: absolute;
  }

显示：