在Ionic4中，如何在编辑视图中调用并导航回详细页面后刷新详细视图以获取更新记录

Question

我用Ionic4做了一个简单的问题，一切都很好。当我通过put调用更新我的记录并导航回记录的细节以查看更新的值时，它显示旧值。我的更新和导航代码是：

async updateClient() {
  await this.api.updateClient(this.route.snapshot.paramMap.get('id'), this.clientForm.value)
  .subscribe(res => {
      let id = res['_id'];
      this.router.navigate(['/client/detail', id]);
    }, (err) => {
      console.log(err);
    });
}

细节页面代码是：

import { Component, OnInit } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { RestApiService } from '../../rest-api.service';
import { ActivatedRoute, Router } from '@angular/router';
import {Location} from '@angular/common';
@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {
  client: any = {};
  constructor(public api: RestApiService,
    public loadingController: LoadingController,
    public route: ActivatedRoute,
    public router: Router,
    private location: Location) {}
    async getClient() {
        console.log('in getClient');
        const loading = await this.loadingController.create({
        });
        await loading.present();
        await this.api.getClientById(this.route.snapshot.paramMap.get('id'))
          .subscribe(res => {
            console.log(res);
            this.client = res;
            loading.dismiss();
        }, err => {
            console.log(err);
            loading.dismiss();
        });
    }
  ngOnInit() {
    this.getClient();
  }

Answer 1

尝试在this.getClient()方法中调用ionViewWillEnter()方法如下：

ionViewWillEnter(){
    this.getClient();
}

每当您进入页面时，无论是否加载，它都会调用您的this.getClient()方法。