跟着官方示例项目学Ionic-2

针对Ionic-4

传送门
跟着官方示例项目学Ionic-1(blank,tabs)
跟着官方示例项目学Ionic-2(tutorial,sidemenu)
跟着官方示例项目学Ionic-3(super)
跟着官方示例项目学Ionic-4(conference)

tutorial 工程

tutorial工程启动后为hello-world页面,
并且有一个menu的开关按钮,点击后弹出菜单.

tutorial-home.png

toggle-menu.png

从项目结构来看,也Tabs相差无几,这个项目的最大不同就在于app.html和app.component.ts不是直接包含,还另外加上了.

app.html

  
    
      Pages
    
  

  
    
      
        {{p.title}}
      
    
  

app.component.ts

export class MyApp {
@ViewChild(Nav) nav: Nav;

  // make HelloIonicPage the root (or first) page
  rootPage = HelloIonicPage;
  pages: Array<{title: string, component: any}>;
  
  // 中间initializeApp()方法和tabs平台初始化的代码是一致的.
  // ...
  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  }
}

1. 这是教科书式的menu的使用方法,通过查看文档 MENU-api可发现,必须和一起使用才行.因此,在中,增加了#content生成component的引用变量,然后在
   中传入该变量.
2. 而在Ts中,则使用了@ViewChild并传入compoent类型的方法获得生成的引用变量,当然如果改成以下语句,按照标识符也是一样可以获取的

@ViewChild('content') nav: Nav;

3. openPage()方法,先关闭(隐藏)menu菜单,然后根据点击的page,导航到对应的组件去.值得注意的是这里的page是保存Page自身,然后把compent传递给nav,实现导航.

this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];

而最好的编程实践中,是把每个page都编程一个module,然后根据其名字进行导航--Super项目.

pages目录

1. 每个页面都是标准的加结构.
2. list和item-details有层级关系,list作为列表的根入口,通过列表的选择可以跳转到具体明细中去.也就是说,这里说明NavController的使用方式.官方文档链接:Navigation-api,NavParams-api

导航的方法调用:

// 第一个参数ItemDetailsPage指示了跳转的目标页面,第二个参数为传入的参数对象,其包含一个item属性.
this.navCtrl.push(ItemDetailsPage, {
      item: item
    });

导航明细页面从navParams中获取传入的item信息,然后通过数据绑定,显示到html上.

constructor(public navCtrl: NavController, public navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    // 从传入的navParams中获取传入的信息.
    this.selectedItem = navParams.get('item');
  }

sidemenu 工程

sidemenu 工程 和 tutorial 工程几乎一摸一样,唯一的区别在于,它并没有导航明细页面,而是直接导航到自己(同时自己也压栈了).

    // 把自己-ListPage压栈
    this.navCtrl.push(ListPage, {
      item: item
    });

同时,html中增加了如果有传递selectedItem,就把它显示的代码

    You navigated here from {{selectedItem.title}}