Can't resolve all parameters for page

I’m trying to create an intelligent Navigation State controller. It’s purpose is to keep track of the current page as well as a list of all pages in the app in the order they’re supposed to be visited in. When one page is finished with whatever it has to do (play a slideshow/video) it calls this state controller and the controller will set the rootpage to the next page. The controller obviously imports all pages in the app and builds up an array of them. The pages then inject the controller in their constructors. This is where I’m hitting the Can’t resolve all parameters issue, as the injected controller cannot be resolved.

So for example in the controller I have an array of pages = [Page1, Page2, Page3] which is each a component and then in the component I have constructor(public navSate: NavState). I’m sure this is a cyclic dependency which I know isn’t supposed to work.

So what I’m looking for is a way to maybe reference the pages differently, to break the controller’s dependency on them.

Not sure I understand what exactly you’re trying to achieve nor how you do it, maybe some code would help.

But to not let you hanging: You could try working with Events to decouple the dependencies.

// In your pages
private done() {
  this.events.emit('page:done', { page: 'my page', data: { foo: this.bar } });
}
// Your smart controller
constructor() {
  this.events.subscribe('page:done', e => {
    switch(e.page) {
      case 'my page':
        this.navCtrl.setRoot(MyPage, { controllerData: this.data, previousPageData: e.data });
        break;
      default:
        console.warn('Unknown page', e.type);
        break;
    }
  });
}
1 Like

@vklinghammer Your solution works really well, thank you so much! I didn’t even know about this global events component.