ionic5 - 不重复的 Ionic5 FavoriteService

Question

我一直在按照教程创建一个 Ionic5 StarWars 应用程序，虽然它几乎完成了，但在理解如何在所有选项卡（即电影、人物、行星）上获得“最喜欢的”星形按钮时遇到了麻烦。我对 Ionic5 不是很熟悉，并试图弄清楚如何在所有选项卡中添加最喜欢的按钮。已经做了很多研究并花时间试图让它发挥作用。

到目前为止，只有“收藏”电影的功能，而不是人物或行星。当我尝试复制电影的代码以扩展到人和行星时，我不能并得到不允许复制的错误。

非常感谢您对此的任何帮助，因为我希望将所有电影、人物和行星都列为收藏夹。感谢您对此的任何帮助。

favorite.service.ts 中的代码如下：-

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

const STORAGE_KEY  = 'favoriteFilms';

@Injectable({
  providedIn: 'root'
})
export class FavoriteService {

  constructor(private storage: Storage) {
  }

  getAllFavoriteFilms() {
    return this.storage.get(STORAGE_KEY);
  }

 
  isFavorite(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      return result && result.indexOf(filmId) !== -1;
    });
  }

   favoriteFilm(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      result = result || [];
      result.push(filmId);
      return this.storage.set(STORAGE_KEY, result);
    });
  }

  unfavoriteFilm(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      if (result) {
        var index = result.indexOf(filmId);
        result.splice(index, 1);
        return this.storage.set(STORAGE_KEY, result);
      }
    })
  }
}

这正是我尝试将服务导入组件的方式：-

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

const STORAGE_KEY = 'favoriteFilms';
const STORAGE_KEY1 = 'favoritePlanets';

@Injectable({
  providedIn: 'root'
})
export class FavoriteService {

  constructor(private storage: Storage) {
  }

  getAllFavoriteFilms() {
    return this.storage.get(STORAGE_KEY);
  }

  getAllFavoritePlanets() {
    return this.storage.get(STORAGE_KEY1);
  }
 
  isFavorite(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      return result && result.indexOf(filmId) !== -1;
    });
  }

  isFavorite(planetId) {
    return this.getAllFavoritePlanets().then(result => {
      return result && result.indexOf(planetId) !== -1;
    });
  }


   favoriteFilm(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      result = result || [];
      result.push(filmId);
      return this.storage.set(STORAGE_KEY, result);
    });
  }

  favoritePlanet(planetId) {
    return this.getAllFavoriteFilms().then(result => {
      result = result || [];
      result.push(planetId);
      return this.storage.set(STORAGE_KEY1, result);
    });
  }

  unfavoriteFilm(filmId) {
    return this.getAllFavoriteFilms().then(result => {
      if (result) {
        var index = result.indexOf(filmId);
        result.splice(index, 1);
        return this.storage.set(STORAGE_KEY, result);
      }
    })
  }

  unfavoriteFilm(planetId) {
    return this.getAllFavoritePlanets().then(result => {
      if (result) {
        var index = result.indexOf(planetId);
        result.splice(index, 1);
        return this.storage.set(STORAGE_KEY1, result);
      }
    })
  }
}

这是每次重复我收到的错误消息（x4 次）：-

重复的功能实现。ts(2393)

组件页面（planet-details.page.ts）如下：-

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from 'src/app/services/api.service';
import { EmailComposer } from '@ionic-native/email-composer/ngx';
import { FavoriteService } from 'src/app/services/favorite.service';

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

  planet: any;
  isFavorite = false;
  planetId = null;
 
  constructor(private activatedRoute: ActivatedRoute, private api: ApiService,
    private emailComposer: EmailComposer, private favoriteService: FavoriteService) { }
 
  ngOnInit() {
    let id = this.activatedRoute.snapshot.paramMap.get('id');
    this.api.getPlanet(id).subscribe(res => {
      this.planet = res;
      console.log(res);
    });
  }
  favoritePlanet() {
    this.favoriteService.favoritePlanet(this.planetId).then(() => {
      this.isFavorite = true;
    });
  }

  unfavoritePlanet() {
    this.favoriteService.unfavoritePlanet(this.planetId).then(() => {
      this.isFavorite = false;
    });
  }

  sharePlanet() {
    let email = {
      to: "",
      subject: `I love this planet: ${this.planet.name}`,
      body: `Do you like it?<br><br>"${this.planet.opening_crawl}"`,
      isHtml: true
    };

    this.emailComposer.open(email);
  }

}

Planet-details.page.html 如下：-

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/planets"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ planet?.title }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="unfavoritePlanet()" *ngIf="isFavorite">
        <ion-icon name="star" slot="icon-only" color="secondary"></ion-icon>
      </ion-button>
      <ion-button (click)="favoritePlanet()" *ngIf="!isFavorite">
        <ion-icon name="star-outline" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-card *ngIf="planet" class="planet-card">
    <ion-item class="planet-card" lines="none">
      <ion-icon name="cloudy-night-outline" slot="start"></ion-icon>
      Climate for {{ planet.name }}: {{ planet.climate }}
    </ion-item> 

    <ion-item class="planet-info" lines="none">
      <ion-icon name="planet" slot="start"></ion-icon>
      Rotation Period: {{ planet.rotation_period }}
    </ion-item> 
     
    <ion-item class="planet-info1" lines="none">
      <ion-icon name="people-outline" slot="start"></ion-icon>
      Population: {{ planet.population }}
    </ion-item>
  </ion-card>
 
<ion-button expand="full" (click)="sharePlanet()">Share by Email</ion-button>

</ion-content>

我得到的两个错误与上面在 favorite.service.ts 中概述的两个错误（重复功能实现）ts.2393 相同，但现在只得到 2 个错误，而不是 4 个。这两个错误都是由于重复 'isFavorite(filmId )' 和 'isFavorite(planetId)。

src/app/services/favorite.service.ts:24:3 中的错误 - 错误 TS2393：重复的功能实现。[ng] [ng] 24
isFavorite(filmId) { [ng] ~~~~~~~~~~ [ng]
src/app/services/favorite.service.ts:30:3 - error TS2393: Duplicate function implementation . [ng] [ng] 30 isFavorite(planetId) { [ng] ~~~~~~~~~~

标签： ionic5