ionic2笔记

Posted 2020-09-21

如何初始化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文件夹，里面定义管道，

模版如下

 1 import { Injectable, Pipe,PipeTransform } from ‘@angular/core‘;
 2 
 3 @Pipe({
 4     name: ‘test‘ //管道名称，运用是就用 这个名字
 5 })
 6 @Injectable()
 7 export class Test implements PipeTransform{
 8     constructor(){}
 9 
10     transform(val) {
11       //.处理逻辑区域
12       //.
13       // .
14         return  newValue; //返回值
15     }
16 }

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

3.新建组件

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

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

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

 1 import {Component,Input,Output, Renderer } from ‘@angular/core‘;
 2 @Component({
 3        selector:‘my-test‘,//组件名称
 4        templateUrl:‘my-test‘//通常同级目录下对应的html
 5 })
 6 
 7 export class MyTest {
 8    @Input(‘A‘) B :any;//这里A是页面传入使用组件时的属性名 B是组件接收的名称  对应的海游output
 9     private cards2 : any;
10     constructor(
11        
12     ) {
13 
14     }
15 
16    ngOnInit() {
17       
18     }
19 
20 }

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

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

 1 @NgModule({
 2   declarations: [
 3     MyApp,
 4     AboutPage,
 5     ContactPage,
 6     HomePage,
 7     TabsPage
 8     //页面，管道，组件都需在此申明
 9   ],
10   imports: [
11     BrowserModule,
12     IonicModule.forRoot(MyApp)
13   ],
14   bootstrap: [IonicApp],
15   entryComponents: [
16     MyApp,
17     AboutPage,
18     ContactPage,
19     HomePage,
20     TabsPage
21     //只有页面需要在此懒加载
22   ],
23   providers: [
24     StatusBar,
25     SplashScreen,
26     {provide: ErrorHandler, useClass: IonicErrorHandler}
27   ]
28 })

5.修改进入是首页

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