6, Modal

1, first modal is a content pane, usually used to make a selection or edit.

Let's take a look at what tabs.html did.

/ *---tabs.html----* /<Ion-navbar*navbar Hidebackbutton>  <Ion-title>Modals</Ion-title></Ion-navbar> <ion-content>   <ion-list>    <Ion-list-header>Hobbits</Ion-list-header>    <aIon-item (click)= "Openmodal ({charnum:0})">Gollum</a>    <aIon-item (click)= "Openmodal ({charnum:1})">Frodo Baggins</a>    <aIon-item (click)= "Openmodal ({charnum:2})">Sam</a>  </ion-list> </ion-content>/ *---tabs.html----* /

The above common 3 item and a click method for each item listens for a parameter. See Tabs.js

/*---tabs.js----*/Import {Modal, Navcontroller, Page} from' Ionic-angular '; import {modalscontentpage} from'./modal.js '@Page ({templateurl:' Build/pages/tabs/tabs.html ',}) Export class Tabspage {static get parameters () {return[[Navcontroller]]; } constructor (NAV) { This. Nav =nav; } openmodal (Characternum) {Let modal=modal.create (Modalscontentpage, characternum);  This. Nav.present (modal); } } /*---tabs.js----*/

First I imported the. Import { Modal, navcontroller, Page } from ' Ionic-angular '; page needless to say.

You remember. Navcontroller? He is used to control the routing. I remember using his route to pass the parameter is. this .nav.push( ItemDetailsPage , {         item: item });

It is used here to this .nav.present(modal);  Read the previous chapters to know that when creating loading alert, he used present instead of push to represent. He's not actually navigating to another route.

Instead, it becomes a layer. Overlay on top of our page. This is something to remember. The Modal.create method accepts a two parameter and one is a component. One is our parameters. We are looking at how Modal.js receives this parameter.

/*---modal.js----*/Import {navparams, page,viewcontroller} from' Ionic-angular '; @Page ({templateurl:' Build/pages/tabs/modal.html ',}) Export class Modalscontentpage {static get parameters () {return[[Navparams],[viewcontroller]]; } constructor (Params,viewctrl) { This. params =params;  This. Viewctrl =Viewctrl; varCharacters =[{name:' Gollum ', Quote:' Sneaky Little hobbitses! ', Image:' Img/1.jpg ', items: [{title:' Race ', note: ' Hobbit '}, {title:' Culture ', note: ' River Folk '}, {title:' Alter Ego ', note: ' Smeagol '}]}, {name:' Frodo ', Quote:' Go back, sam! I\ ' m going to Mordor alone! ', Image:' Img/1.jpg ', items: [{title:' Race ', note: ' Hobbit '}, {title:' Culture ', note: ' Shire Folk '}, {title:' Weapon ', note: ' Sting '}]}, {name:' Samwise Gamgee ', Quote:' What are we need is a few good taters. ', Image:' Img/1.jpg ', items: [{title:' Race ', note: ' Hobbit '}, {title:' Culture ', note: ' Shire Folk '}, {title:' Nickname ', note: ' Sam ' }                ]            }        ];  This. character = characters[ This. Params.get (' CharNum ')]; } dismiss () { This. Viewctrl.dismiss (); }} /*---modal.js----*/

First of all, I imported. Import { navparams, Page, viewcontroller } from ' ionic-angular ';

The same goes for the navigation from our route, this .nav.push( this .nav.present()  But the way we receive the parameters doesn't change. We're also using the this .params.get( ‘charNum‘ ) Get Parameters

1, parse the code in constructor 1, var characters It's actually getting a local variable inside the array is the data.   2. this .params.get( ‘charNum‘ ) Get a parameter in tabs.html we learned that his argument returns a number type. So it gets to the var characters One of the data in the array 3, this .character Actually, it's the equivalent of NG1. $scope. CharacterHe itself and local variables var characters It doesn't matter, so here we get the data to the scope this .character

2, see dismiss Method this .viewCtrl.dismiss(); viewCtrl : ViewController 中的 ViewController   He is what? Because modal his creation is to overwrite the page into a layer, so when the layer is removed

It needs to be used. this .viewCtrl.dismiss();This method. Then look at the modal.html page.

/ *---modal.html----* /<Ion-toolbar>    <Ion-title>Description</Ion-title></Ion-toolbar> <ion-contentpadding>    <ion-list>        <Ion-item>            <Ion-avatarItem-left>                <imgsrc= "{{character.image}}">            </Ion-avatar>            <H2>{{Character.name}}</H2>            <P>{{Character.quote}}</P>        </Ion-item>         <Ion-item*ngfor= "Let item of character[' items ']">{{Item.title}}<Ion-noteItem-right>{{Item.note}}</Ion-note>        </Ion-item>    </ion-list>    <Buttonblock (click)= "Dismiss ()">Close modal</Button></ion-content>/ *---modal.html----* /

Final effect:

6, Modal