Angular+Ionic数据加载中，消息提示方法

1，加载中效果

2，ts中引入配置

import { ToastController, LoadingController, NavController,AlertController } from '@ionic/angular';

export class  SetUpPage extends UserInfo implements OnInit {
constructor(
    private loadingCtrl: LoadingController,
  ) { super(appService, localStorageService); }

3，使用

//退出登录
  async logout() {
    this.showLoading(this.loadingCtrl, '退出中...').then((loading) => {
      this.rest.apiPost('', this.rest.logout + '/' + localStorage.getItem('QZH_TOKEN'))
        .subscribe((res) => {
          if (res.status === 200) {
            this.toastSuccess(this.toastCtrl, '退出成功');
            this.storageService.removeToken();
            // this.storageService.removeStorage('username');
            // this.storageService.removeStorage('password');
            // this.storageService.removeStorage('userId');
            // this.appService.userInfoEvent.emit('update');]
            this.goBack();
          } else {
            this.toastError(this.toastCtrl, res.msg);
          }
          loading.dismiss();
        }, (err) => {
          this.toastError(this.toastCtrl, err.msg);
          loading.dismiss();
        });
    });
  }
}

4，消息提示框效果

5，ts中

//引入 ToastController,
import { ToastController, LoadingController, NavController, IonSlides,AlertController  } from '@ionic/angular';

constructor(
    private rest: RestService,
 
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private navCtrl: NavController,
    private loadingCtrl: LoadingController,
    public appService: AppService,
    public localStorageService: StorageService,
    private toastCtrl: ToastController,//引入 ToastController,
  
  ) {
    super(appService, localStorageService);
    this.goodsId = this.activatedRoute.snapshot.paramMap.get('goodsId');
  }


//方法中使用
upAdd(info, symbol) {
    if (symbol == "-") {
      if (info.proCount <= 1) {
        this.toastWarning(this.toastCtrl, "亲~，数量低于选择范围~");
      } else {
        info.proCount -= 1;
      }
    } else if (symbol == "+") {
      if (info.proCount > 1000) {
        this.toastWarning(this.toastCtrl, "亲~，数量超出库存范围~");
      } else {
        info.proCount += 1;
      }
    }
  }

6，html中使用

 <div class="rate-type-change">
           <!--  (click)="downReduce()" -->
          <div class="rate-type" (click)="upAdd(info,'-')"><span>-</span></div>
          <div class="rate-type-number"><span>{{info.proCount}}</span></div>
          <div class="rate-type" (click)="upAdd(info,'+')"><span>+</span></div>
        </div>