Ionic 3, using multiple pages html for one component

Question

I'm using Ionic 3 and I have a question.

Is it possible for 2 pages of html to use the same 'component.ts'?

For example, if I have 2 pages: 1st page show all users, 2nd page show user's detail and 1 component UserPage.

For Ionic 1, I can use one controller in multiple pages of html but in Ionic 3 I don't know if it's possible. If it possible, how can I call the page html on click? For example with the component we do like this:

this.navCtrl.setRoot(TabsPage);

And for practice, is it better to use it this way or to use the normal way ( ionic g page XXX that generates all??) Thanks in advance.

It's very bad coding practice though.. Why would you do that? — TheLebDev
– TheLebDev, Commented Jul 27, 2018 at 10:20

Ola Alsaker · Accepted Answer · 2018-07-27 12:00:09Z

2

I would recommend you creating a separate page for details, i.e. user-details. In your list-page, let's call it users, you could do like this

this.navCtrl.push('user-details', { id: user.id });

This will send an ID-parameter to user-details, which you can get by doing following in your user-details.ts

userID: number;

constructor(public navParams: NavParams){
// ...
}

ionViewDidLoad() {
    this.userID = this.navParams.get('id');
}

Of course, if you want to send a complete user-object, you just edit the object to be something like

{ user: user }

and access it at

this.navParams.get('user')

Using this.navCtrl.setRoot() for navigating is bad practise. Instead, you should use this.navCtrl.push() and this.navCtrl().pop().

answered Jul 27, 2018 at 12:00

Ola Alsaker

2481 gold badge3 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic 3, using multiple pages html for one component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related