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?
source to share
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.
source to share