Angular+Ionic组件弹框，跳转，及返回方法

Angular+Ionic组件弹框，跳转，及返回方法

在使用ionic和angular的过程中，用到了一些ionic的组件及其angular的插件，
这里简单作一下总结，方便下次使用：

1，实现带确认取消的效果

2，ts文件中，引入AlertController

import { ActivatedRoute, Router } from '@angular/router';
import { RestService, StorageService, AppService } from '../../service';
//引入AlertController
import { ToastController, LoadingController, NavController,AlertController } from '@ionic/angular';


export class  SetUpPage extends UserInfo implements OnInit {
  constructor(
    private rest: RestService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    public appService: AppService,
    private loadingCtrl: LoadingController,
    private toastCtrl: ToastController,
    private navCtrl: NavController,
    public localStorageService: StorageService,
    private storageService: StorageService,
    //引入AlertController
    private alertController: AlertController,
  ) { super(appService, localStorageService); }

//方法使用
async logoutConfirm() {
    const alert = await this.alertController.create({
      header: '提醒',
      message: '确定退出登录吗？',
      buttons: [
        {
          text: '取消',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
          }
        }, {
          text: '确定',
          handler: () => {
            this.logout();//退出登录
          }
        }
      ]
    });
    await alert.present();
  }
//退出登录
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();
        });
    });
  }


  }

3，html中

  <div class="delivery-address-content-footer" (click)="logoutConfirm()">
     <span>退出当前账户</span>
   </div>

4，跳转页面方法

a,路由配置

app-routing.module.ts中

{ path: 'concern-shop', loadChildren: './pages/concern-shop/concern-shop.module#ConcernShopPageModule' },//关注

跳转方法(1)

 <div class="personal-datail-top-null" [routerLink]="['/my-message']"></div>

跳转方法(2)

this.router.navigate(['/product-reclassify'])

b,接口配置

service文件下
rest.service.ts文件中

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Res } from './model';
@Injectable()
export class RestService {

  constructor(public httpClient: HttpClient) { }
  public baseUrl = ""; // web路径
  // public baseUrl="https://www.qxz.com" // 打包apk,ipa使用
  
  public login = '/api/user/login'; // 登录接口
 
  public getAttentionStore = " /api/personalCenter/attentionStore/select";//关注店铺

  public getdeletByStoreId = " /api/personalCenter/attentionStore/deletByStoreId";//取消关注                               

  apiPost(reqData, url): Observable<Res> {
    return this.httpClient.post<Res>(this.baseUrl + url, reqData);
  }
  apiGet(url): Observable<Res> {
    return this.httpClient.get<Res>(this.baseUrl + url);
  }
  //req
  apiGetReq(reqData, url): Observable<Res> {
    let str = "?";
    for (let key in reqData) {
      str += key + "=" + reqData[key];
    }
    return this.httpClient.get<Res>(this.baseUrl + url + str);
  }
  apiPic(reqData, url): Observable<ArrayBuffer> {
    const options = {
      responseType: 'arraybuffer' as 'json'
    };
    return this.httpClient.post<ArrayBuffer>(this.baseUrl + url, reqData, options);
    // .catch(this.handleError);
  }
  apiGetPic(url): Observable<ArrayBuffer> {
    const options = {
      responseType: 'arraybuffer' as 'json'
    };
    return this.httpClient.get<ArrayBuffer>(this.baseUrl + url, options);
    // .catch(this.handleError);
  }
}

5,返回上一页面方法

html中

<div class="-order-icon" (click)="goBack()">
          <ion-icon name="chevron-back-outline" class="icon-left"></ion-icon>
 </div>

ts中

 goBack() {
    this.appService.commonEvent.emit('update'); 
    this.navCtrl.back();
  }