Ionic 2 "Kann nicht alle Parameter auflösen" beim Importieren einer Komponente

Question

Meine Home-Komponente verfügt über Funktionen zum Arbeiten mit meinem Hauptarray von Listenelementen. Ich versuche, auf diese Funktionen über eine andere Komponente namens item-details zuzugreifen.

Wenn ich jedoch die HomePage-Komponente importiere und sie dem Konstruktor für item-details.ts hinzufüge, erhalte ich den folgenden Fehler: "Laufzeitfehler Kann nicht alle Parameter für ItemDetailPage auflösen: ([object Object], [Objekt Objekt],?) ". error image

Artikel-details.ts:

import { Component } from '@angular/core'; 
import { NavParams, NavController } from 'ionic-angular'; 
import { HomePage } from '../home/home'; 

@Component({ 
    selector: 'page-item-detail', 
    templateUrl: 'item-detail.html' 
}) 
export class ItemDetailPage { 
    title; 
    description; 

    constructor(
    public navParams: NavParams, 
    public navController: NavController, 
    public home: HomePage 
){ 

    } 

    ionViewDidLoad() { 
    this.title = this.navParams.get('item').title; 
    this.description = this.navParams.get('item').description; 
    } 

    deleteItem(item){ 
    //call deleteItem in home.ts 
    } 
} 

home.ts:

import { Component } from '@angular/core'; 
import { ModalController, NavController, ViewController } from 'ionic-angular'; 
import { AddItemPage } from '../add-item/add-item' 
import { ItemDetailPage } from '../item-detail/item-detail'; 
import { Data } from '../../providers/data/data'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    public items = []; 

    constructor(
    public navCtrl: NavController, 
    public modalCtrl: ModalController, 
    public dataService: Data 
    ) { 
    this.dataService.getData().then((todos) => { 
     if(todos){ 
     this.items = JSON.parse(todos); 
     } 
    }); 
    } 

    ionViewDidLoad(){ 

    } 

    addItem(){ 
    let addModal = this.modalCtrl.create(AddItemPage); 

    addModal.onDidDismiss((item) => { 
      if(item){ 
      this.saveItem(item); 
      } 
    }); 
    addModal.present(); 
    } 

    saveItem(item){ 
    this.items.push(item); 
    this.dataService.save(this.items); 
    } 

    viewItem(item){ 
    this.navCtrl.push(ItemDetailPage, { 
     item: item 
    }); 
    } 

    deleteItem(item){ 
    //code to delete an item from items array 
    } 
} 

Und hier ist ein Bild von meiner Dateistruktur, falls es relevant ist. file structure

Kann mir jemand helfen, herauszufinden, was los ist und wie ich es beheben kann?

Answer 1

In Ihrem ItemDetailPage Komponente, fordern Sie den Container eine HomePage Komponente zu lösen, wenn Sie stattdessen wirklich für einen Dienst stellen soll.

Wie oben gezeigt, in Ihrem ItemDetailPage, versuchen Sie einen Verweis auf eine HomePage Komponente zu erhalten (das Erstellen und auch eine ItemDetailPage Referenzierung Komponente), und das macht für eine zirkuläre Referenz. Das wird nicht funktionieren.

Es gibt wirklich keine Notwendigkeit, eine Komponente aufzulösen, wenn Sie einen Dienst haben, der das tut, was Sie brauchen. Das ist, was Dienste sind, um Funktionalität zu teilen. Verschieben Sie Ihren Artikelverwaltungscode (saveItem, addItem, deleteItem) in einen Dienst, den die Seiten Home und ItemDetail jeweils referenzieren und verwenden können.

Ich hoffe, das ist hilfreich für Sie.