Ionic2 Study Notes (6): NAVIGATION

GreyOriginal address: http://www.cnblogs.com/greyzeng/p/5551535.html

?

??

? It is convenient to create a page in Ionic2, and it is convenient to switch between pages, we are implementing the following requirements:

Create a button on the main page, click the button, jump to a new page, during the jump, we can also pass the data between the pages.

• Enter the project directory: CD myfirstapp
• Create a new page:

  ionic g page secondpage

  will @import ". /pages/second-page/second-page.scss "; add to App\themes\app.core.scss

• on the main page app\pages\home\ Add a button to the home.html and add the corresponding Click event handler function to this button openmodal ()

• Span style= "font-family: Microsoft Jas Black" in App\pages\home\home.ts, complements the contents of this event handler function. We can pass:

  this.nav.push (newpage)

  This method to jump to newpage this page, at the same time, we can use the

  this.nav.push (newpage, {name "Grey", Job: "IT"});

To send some data to newpage, such as the above means to newpage into the name= "grey", job= "IT",

In NewPage, we can get the corresponding value "grey" and "IT" through. Navparams.get (' name ') and Navparams.get (' job ')

App\pages\home\home.ts Add the following code:

In App\pages\second-page\second-page.ts, add the following code to get the data from the previous page

• The data came out:

  app\pages\ Second-page\second-page.html:

• Demo effect: Ionic serve-l

  Click button:

• In addition, we can add a button in Secondpagepage that returns to the home page,

  app/pages/second-page/second-page.html

  in app/pages/second-page/ Second-page.ts adds an event function to handle the return: This.nav.pop ()

• Span style= "font-family: Microsoft Jas Black" > Demo effect: Ionic serve-l

  Click the Back button to return to the main page

  ?

------

Previous: Ionic2 study notes (5): Provider

Ionic2 Study Notes (6): NAVIGATION