如何刷新ionic 4中的页面

Question

我想在删除数据成功后刷新页面。当我删除或更新时，我必须先刷新页面，然后再刷新我的数据。如何在 ionic 4 中使用 navController 请帮助我...

本书-list.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Book List
    </ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="/user-detail">
        <ion-icon name="add-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card>


    <ion-card-content>
      <ion-card-subtitle>Books:</ion-card-subtitle>

      <ion-list *ngFor="let book of books">
          <ion-item>
            <ion-label text-wrap>
                <ion-text>
                    <p>Title: {{book.title}}</p>
                </ion-text>
                <ion-text>
                    <p>Description: {{book.description}}</p>
                </ion-text>
              </ion-label>
              <ion-button [routerLink]="['/edit-book/',book.id]" (click)="editBook(book.id)">
                <ion-icon name="create" slot="end"></ion-icon>
              </ion-button>
              <ion-button color="danger" (click)="delete(book.id)">
                  <ion-icon name="trash" slot="end"></ion-icon>
              </ion-button>

          </ion-item>
        </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

本书-list.page.ts

import { Component, OnInit } from '@angular/core';
import { Book } from '../book';
import { first } from 'rxjs/operators';
import { UserService } from '../user.service';
import { AlertController } from '@ionic/angular';
import { ToastController } from '@ionic/angular';
import { Router } from '@angular/router';
import {  NavController, NavParams } from '@ionic/angular';
@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.page.html',
  styleUrls: ['./book-list.page.scss'],
})
export class BookListPage implements OnInit {
  books: Book[] = [];
  constructor(private router: Router,public navCtrl: NavController,public toastController: ToastController, private userService: UserService, public alertController: AlertController) { }

  ngOnInit() {
    this.getBook();
  }

  getBook() {
    this.userService.getBook().pipe(first()).subscribe(books => {
      this.books = books;


    });
  }

  async delete(id: number) {

    const alert = await this.alertController.create({
      header: 'Confirm!',
      message: 'Are you sure want to delete this book details?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            this.userService.delete(id).pipe(first()).subscribe(async books => {

              books = books
              const toast = await this.toastController.create({
                message: 'Your Book details have been deleted.',
                duration: 2000

              });
              toast.present();
              this.router.navigate(['book-list']);
            });
          }

        }
      ]
    });

    await alert.present();

  }
  editBook($id) {
    this.userService.setCurrentId($id);

  }

}

这是我的代码请帮助我如何刷新离子页面以及如何在此代码中使用 NavController 请帮助我

Answer 1

我通过将 ngOnInit() 中的函数调用移动到 ionViewWillEnter() 中解决了这个问题。尝试将 book-list-page.ts 中的代码更改为：

    ngOnInit() {
    }

    ionViewWillEnter() {
        this.getBook();
    }

我不知道这是正确的还是最好的方法，但对我来说这个解决方案效果很好。

Answer 2

我通过移动 ngOnInit() 中的函数调用解决了这个问题到 reload() 函数，这是一个用户定义的。我还取消了存储变量的数据并调用了用户定义的 reload() 中的基本功能，因此这也显示了数据在后台重新加载的效果

假设您认为所有基本功能都在 ngOnInit() 中，数据存储在变量 datavar1、datavar2 中，因此您可以像下面那样做

reload(){
   datavar1 = undefined;
   datavar2 = undefined;
   ngOnInit();
}

在上面的代码示例中，ngOnInit() 具有重要代码，如 api 调用等，datavar1 和 datavar2 变量具有 api 调用的响应

Answer 3

要刷新组件，您可以使用 ionViewWillEnter 方法。

import { ViewWillEnter } from '@ionic/angular';

export class componentName implements ViewWillEnter {

  ionViewWillEnter() {

  }
}

如何刷新ionic 4中的页面

How to refresh page in ionic 4

angular

ionic4