ionic2笔记

如何初始化ionic项目直接跳过了，以下仅记录常用开发的需求，版本对应的版本是2.3.0的。

初始化项目的结构及简单介绍

1.ionic设置app图标和启动动画

替换icon.png，是设置图标

替换splash.png是启动动画

替换完成后，执行 ionic resources ，会在android和iOS中生成各个尺寸的图标和启动动画

2.新建页面

在src/pages下面新建文件夹，分别新建html，ts,scss。。。

页面写完以后

一定要在src/app/app/app.module.ts文件declarations 和 entryComponents 都要引入。

3.新建管道pipe(ng1中叫作过滤器)

在src下新建pipes文件夹，里面定义管道，

模版如下

import { Injectable, Pipe,PipeTransform } from '@angular/core';

@Pipe({
    name: 'test' //管道名称，运用是就用 这个名字
})
@Injectable()
export class Test implements PipeTransform{
    constructor(){}

    transform(val) {
      //.处理逻辑区域
      //.
      // .
        return  newValue; //返回值
    }
}

一定要在src/app/app/app.module.ts文件declarations 中引入。

3.新建组件

在src 下新建components （组件都定义在此文件夹下）

在src/pages下面新建文件夹，分别新建html，ts,scss。。。

不再赘述，组件的ts文件结构如下

import {Component,Input,Output, Renderer } from '@angular/core';
@Component({
       selector:'my-test',//组件名称
       templateUrl:'my-test'//通常同级目录下对应的html
})

export class MyTest {
   @Input('A') B :any;//这里A是页面传入使用组件时的属性名 B是组件接收的名称  对应的海游output
    private cards2 : any;
    constructor(
       
    ) {

    }

   ngOnInit() {
      
    }

}

最后，一定要在src/app/app/app.module.ts文件declarations 中引入。

4.app.module.ts文件的中的@NgModule预览

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
    //页面，管道，组件都需在此申明
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
    //只有页面需要在此懒加载
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

5.修改进入是首页

app/app.component.ts中修改 rootPage的值即可。