时间戳

首页 > 解决方案 > 离子角度应用程序中的Router.navigate问题

angular - 离子角度应用程序中的Router.navigate问题

问题描述

我正在用 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没有被触发，所以我不会恢复更新的项目列表。当我单击已删除的项目时，我会被重定向到一个空白页面，因为我不再拥有该项目。我应该怎么做才能在我的主页中不再看到已删除的项目？

标签： angulartypescriptionic-frameworkangular-router

解决方案

这是因为 Ionic 中的缓存而发生的。

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

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

在你RecipesPage改变

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

至

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

推荐阅读