ionic基础知识点概括

ionic基础命令

安装：
1、安装最新版的nodejs程序
复制 .npmrc 文件到 C:\Users\用户名 目录下
2、在控制台使用命令 npm install -g ionic 安装ionic命令
3、在控制台使用命令 npm install -g cordova 安装cordova命令
4、创建项目：ionic start 项目名，在弹出的选项中选择 tabs，回车
5、运行项目：cd 到项目中。使用ionic serve启动项目

Android打包：
1、安装jdk，Android,gradle环境
2、命令：ionic cordova build android
3、安卓真机调试：
ionic cordova run android -l
chrome://inspect/#devices打开网页

创建页面：ionic g page pages/home

Ionic4.x 中自定义公共模块

1.创建公共模块以及组件:
ionic g module module/slide
ionic g component module/slide
2.公共模块 slide.module.ts 中暴露对应的组件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlideComponent } from './slide.component';
@NgModule({
declarations: [SlideComponent],
imports: [
CommonModule
],exports:[SlideComponent]
})
export class 

3.用到的地方引入自定义模块，并依赖注入自定义模块

import { SlideModule } from '../module/slide/slide.module';
@NgModule({
imports: [
CommonModule, FormsModule, IonicModule, SlideModule, RouterModule.forChild(routes)
],declarations: [Tab4Page]
})

4、使用自定义模块

<app-slide></app-slide>

动态路由

1.配置动态路由

const routes: Routes = [
    {path: 'home', component: HomeComponent},
    {path: 'about', component: AboutComponent},
    {path: 'details/:id', component:DetailsComponent},
    {
   		path: '',
	    redirectTo: '/home',
	    pathMatch: 'full'
    }
];

2.跳转传值

<a [routerLink]="[ '/details/',id]">详情页面</a>
<a routerLink="/details/{{id}}">详情页面</a>

3.获取动态路由的值

import { ActivatedRoute} from '@angular/router';

constructor( private route: ActivatedRoute) {
}

ngOnInit() {
    console.log(this.route.params);
    this.route.params.subscribe(data=>this.id=data.id);
}

动态路由的 js 跳转

1. 引入

import { Router } from '@angular/router';

2.初始化

 export class HomeComponent implements OnInit {
    constructor(private router: Router) {
    }
    ngOnInit() {
    }
    goNews(){
    // this.router.navigate(['/details', item.id]);
    this.router.navigate(['/details']);
    }
    }

3.路由跳转

this.router.navigate(['/details', item.id]);