ionic3项目实战教程二（新建component、新建page、修改tabs、弹窗alertCtrl、跳转navCtrl、带参跳转、ion-list、ion-input、button）

前言：
- 大神都是从坑里走过来的！回首ionic3项目的开发历程，完全就是一部采坑填坑史，每每感觉这个功能很快就能搞完下班了，结果在坑里一待就是几小时+_+。
- 有人说typescript将带领angular一统江湖，但是也有可能起点太高被前端程序猿抛弃。对于我们这些小虾米，只能静静的看着BAT的走向然后蜂拥而上。跟紧潮流固然是好事，但是打好es6的基础才能跟得上啊。

一、修改代码项目奔溃

1. 修改完代码之后会发现控制台报错了

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at _errnoException (util.js:1024:11)
    at TCP.onread (net.js:615:25)

2.执行cnpm i --save-dev @ionic/app-scripts@3.1.6即可
3.修改完代码莫名其妙页面奔溃的，但是代码没问题！那是因为没有检测到代码变化及时刷新，所以只能手动重启项目=_=! 习惯就好

二、新建组件

1.执行ionic g --help 查看能自动生成的组件等命令

    $ ionic generate
    $ ionic generate component
    $ ionic generate directive
    $ ionic generate page
    $ ionic generate pipe
    $ ionic generate provider
    $ ionic generate tabs
    $ ionic generate component foo
    $ ionic generate page Login
    $ ionic generate page Detail --no-module
    $ ionic generate page About --constants
    $ ionic generate pipe MyFilterPipe

1. ionic g component actionSheet 新建名为actionSheet的组件, 组件在src/components里面
2. 在app/app.modules.ts中引入，只需要引入一次

//引入components模块
import { ComponentsModule } from "../components/components.module";
//引入的模块 依赖的模块
imports: [
  BrowserModule,
  ComponentsModule,
  IonicModule.forRoot(MyApp)
],

4.然后就可以在页面使用这个组件了，比如在pages/about/about.html里面

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!-- 直接使用组件 -->
  <action-sheet></action-sheet>
</ion-content>

5.现在来丰富一下actionSheet组件。
修改action-sheet.ts

import { Component } from '@angular/core';

@Component({
  selector: 'action-sheet',
  templateUrl: 'action-sheet.html'
})
export class ActionSheetComponent {
   
  text: string;
  showText: boolean=true;
  list: Array<string>=['小明',