Ionic 2 "Unable to resolve all options" when importing component

My home component has functions to work with my main array of list items. I am trying to access these functionality through another component called parts.

However, when I import the HomePage component and add it to the constructor for item-details.ts, I get the following error: "Runtime error Unable to resolve all parameters for ItemDetailPage: ([Object Object], [Object Object] ,?)". error image

item-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
  }
}

      

And here is a picture of my file structure in case it matters. file structure

Can anyone help me figure out what happened and how to fix it?

+3


source to share


1 answer


In your component, ItemDetailPage

you are asking the container to resolve the component HomePage

when you really need to request a service.

As shown above, in ItemDetailPage

you are trying to get a reference to a component HomePage

(an author as well as a reference component ItemDetailPage

) and this makes a circular reference. It won't work.



There is really no need to resolve the component when you have a service that will do what you want. This requires services to share functionality. Move your product code management ( saveItem

, addItem

, deleteItem

) in the service, which can refer to pages Home

and ItemDetail

.

Hope this helps you.

+2


source







All Articles