Push existing page to another nav

Ionic Framework ionic-v3
1

Hi,

I have a split pane, ordinary master detail template.
What I want to accomplish?

  • When user selects item from list in details pane (right side), I want to grab existing page instance already displayed in details pane ( e.g. this.nav.getActive().instance ), and somehow push it to master, as it is! I don’t want to re-render it in master pane.

When I do it that way ( this.nav1.push(this.nav2.getActive().instance ) I get an error saying “Uncaught (in promise): invalid views to insert”.

Is something like this even possible? Does anybody know how could I do that?

Or do I have to re-render that page in master pane, but pass-in parameters in order to keep page’s current state?

Thanks!!!

2

Maybe not the best but you can use the Event system in ionic to message a context change which the master picks up

Alternative could be using @Input variable binding from the side pane to the main pane (in the template)

3

Thanks for the ideas, but I’m already subscribed to those events. As the matter of fact, that event I subscribed to is the same place I want to get the job done:

 this.subscription = this.service.itemSelected$.subscribe(
      item => {

        this.masterNav.push(this.detailNav.getActive().instance);

      }
    );
4

I am referring to this

and I dont see any code reflecting that you are using the Event system

5

Hi,

I’m already using angular events, but I don’t see how Ionic events would help. Could you describe how would it work?

Please, read the question again.

6

Plse share some code to see the architecture of your app

What do ypu mean by angular events

7

I still believe you didn’t understand the question.

I don’t have a problem with the when should I push Page to navController, my issue is HOW do I push already rendered (existing) Page from one navController, to ANOTHER navController.

I have tried ionic event, by broadcasting whole page:

// details page
constructor(public events: Events) {}

itemSelectedFromIonList(item) {
  this.events.publish('item:selected', this);
}

and receiving it on the other end:

// splitPane wrapper page 
constructor(public events: Events) {
  events.subscribe('item:selected', (page) => {
    this.masterNav.push(page);
  });
}

but I get the same error: “Uncaught (in promise): invalid views to insert”.

To shorten further discussion, would you please describe to me how would you use Ionic events to achieve what I wanted to do?

Thanks!!!

8

Pretty awful and non-standard what u r doing

Only one instance of navcontroller needed and required

If u do this becuz u know what u r doing, then u dont need this forum for help

Short enough?

9

The API is set up so you have to re-render the page, and there are at least two good reasons for this. First, it’s like why immutable variables are a good thing. If you build something “new” by reference, and the original thing changes, the new thing will change even if you don’t want it to, which can be a source of unexpected bugs. Second, if you manipulate the DOM directly, you open yourself up to attacks that Angular tries to sanitize.

That said, if I had to do this, I would get the page’s ElementRef from the ViewController, and then use that to mirror the page somewhere else. But if you read the Angular docs for ElementRef, they basically say, “Never do this.”

1 Like
10

Thank you very much for clarification, that’s what I wanted to know!