Router.navigate ionic-angular 应用程序中的问题

Question

我正在 angular 9- ionic 5 中构建一个简单的应用程序。我的主页中有项目列表

我的HTML代码：

<ion-header>
  <ion-toolbar>
    <ion-title>recipes</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <app-recipe-item *ngFor="let recipe of recipes" [recipeItem]="recipe">
    </app-recipe-item>

  </ion-list>
</ion-content>

还有我的TS代码：

import { RecipesService } from './recipes.service';
import { Recipe } from './recipes.model';
import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.page.html',
  styleUrls: ['./recipes.page.scss'],
})
export class RecipesPage implements OnInit, OnChanges {

  recipes: Recipe[];

  constructor(
    private recipesService: RecipesService
  ) { }

  ngOnInit() {
    this.recipes = this.recipesService.getAllRecepies();
  }

  ngOnChanges(changes: SimpleChanges) {
  }

}

当我点击列表中的某个项目时，我将转到项目详细信息页面，我可以在其中删除该项目

HTML:

<ion-header>
  <ion-toolbar color="primary">
    <ion-button slot="start">
      <ion-back-button defaultHref="/recipes"></ion-back-button>
    </ion-button>
    <ion-title>
      {{ loadedRecipe.title }}
    </ion-title>
    <ion-button slot="primary" (click)="onDeleteRecipe()">
      <ion-icon slot="icon-only" name="trash"></ion-icon>
    </ion-button>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid fixed class="ion-no-padding">
    <ion-row>
      <ion-col class="ion-no-padding">
        <ion-img [src]="loadedRecipe.imageUrl"></ion-img>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <h1 class="ion-text-center">{{ loadedRecipe.title}}</h1>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <ion-item *ngFor="let ig of loadedRecipe.ingredients">
          {{ ig }}
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

TS:

import { RecipesService } from './../recipes.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Recipe } from '../recipes.model';
import { AlertController } from '@ionic/angular';
    
@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.page.html',
  styleUrls: ['./recipe-detail.page.scss'],
})
export class RecipeDetailPage implements OnInit {

  loadedRecipe: Recipe;

  constructor(
    private activatedRoute: ActivatedRoute,
    private recipeService: RecipesService,
    private router: Router,
    private alertCtrl: AlertController
  ) {}

  ngOnInit() {
    this.activatedRoute.paramMap
      .subscribe(paramMap => {
        if (!paramMap.has('recipeId')) {
          // redirect
          this.router.navigate(['/recipes'])
          return;
        } else {
          const recipeId = paramMap.get('recipeId');
          this.loadedRecipe = this.recipeService.getRecipe(recipeId);
        }
      });
  }

  onDeleteRecipe() {
    this.alertCtrl.create({
      header: 'Are yo sure?',
      message: 'Do you want to delete the recipe?',
      buttons: [{
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Delete',
          handler: () => {
            this.recipeService.deleteRecipe(this.loadedRecipe.id);
            this.router.navigate(['/recipes']);
          }
        }
      ]
    }).then(alertEl => {
      alertEl.present();
    });
  }

}

现在，当我删除一个项目时，我会使用 router.navigate 方法重定向到父页面，但我仍然拥有列表中的所有项目。 onInit 方法未触发，因此我不会恢复更新的项目列表。当我点击已删除的项目时，我被重定向到一个空白页面，因为我不再有那个项目了。我应该怎么做才能在我的主页上不再看到已删除的项目？

Answer 1

发生这种情况是因为 Ionic 中的缓存。

每次可以放入 ionViewWillEnter 方法时要加载的代码。

ionViewWillEnter() {
  // code which you want to load every time.
}

在你RecipesPage改变

 ngOnInit() {
    this.recipes = this.recipesService.getAllRecepies();
 }

到

ionViewWillEnter() {
   this.recipes = this.recipesService.getAllRecepies();
}

Answer 2

放在服务中

recipes:any[]=[];

你只需要创建一个服务并在那里写一个数组，然后使用拼接

const index = this.ANOTHER_SERVICE.recipes.findIndex(e => e.id === +this.loadedRecipe.id)
if (index>=0){
    this.ANOTHER_SERVICE.recipes.splice(index,1)
}

Router.navigate ionic-angular 应用程序中的问题

Router.navigate problems in ionic-angular app

typescript

ionic-framework

angular

angular-router