Блог

Я следовал руководствам по созданию приложения Ionic5 StarWars и, хотя оно почти завершено, столкнулся с проблемой понимания того, как я могу получить кнопку ‘избранное’ на всех вкладках (ie) Фильмы, Люди, планеты. Я не очень знаком с 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 amp;amp; 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 amp;amp; result.indexOf(filmId) !== -1;
    });
  }

  isFavorite(planetId) {
    return this.getAllFavoritePlanets().then(result => {
      return result amp;amp; 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);
      }
    })
  }
}
  

This is the error message I am getting (x4 times) for each duplication:-

Duplicate function implementation. ts(2393)

The components page (planet-details.page.ts) is as follows:-

 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);
  }

}
  

The 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>
  

Две ошибки, которые я получаю, — это те же две ошибки, что описаны выше (дублирующая реализация функции) ts.2393 в favorite.service.ts, но теперь я получаю только 2 ошибки вместо 4. Обе ошибки вызваны повторением ‘isFavorite(filmId)’ и ‘isFavorite (planetId).

ОШИБКА в src / app /services/favorite.service.ts:24:3 — ошибка TS2393: дублирующая реализация функции. [ng] [ng] 24
является любимым (filmId) { [ng] ~~~~~~~~~~ [ ng]
src/app/services/favorite.service.ts:30:3 — ошибка TS2393: дублирующая реализация функции. [ng] [ng] 30 isFavorite(planetId) { [ng] ~~~~~~~~~~