angular 及ionic 3

1、ionic 的父页面的 sass样式对内部组件起作用

2、ionic 3页面跳转有两种方式

  1、通过在Html中定义[navPush]="morePage" 你需要在app.module 引入页面 并在declarations 和 entryComponents中定义

  2、你还需要在定义跳转链接的页面引入要跳转的页面  并定义为变量

第二种跳转方式，在js中通过代码跳转

<button ion-button (click)="pushMorePage()">代码方式跳转</button>

pushMorePage(){ 
    this.navCtrl.push(MorePage,{});
}
           

第二个参数用于页面间传递参数，下一个页面要引入 import { NavController,NavParams } from 'ionic-angular'; 去接收参数

constructor(public navCtrl: NavController,public params:NavParams) {
    //获取传递过来的参数
    this.title=this.params.get('title');

    //当参数没有定义的情况
    if(this.title == undefined){
      this.title = "没有获取到结果";
    }
  }
           

下一个页面如果想返回上一个页面

this.navCtrl.pop();

3、关于tabs头部和底部的设置，引入IonicModule 在app.module imports中设置

IonicModule.forRoot(MyApp, {
      mode: 'ios',//android是'md'
      backButtonText: '返回',//头部返回键的文字
      tabsHideOnSubPages: 'true'//二级页面不显示底部栏
    })
           

4、当在组建用应用指令出现 下列问题时您需要在组建的module中引入 import { BrowserModule } from '@angular/platform-browser';

Uncaught Error: Template parse errors:
Can't bind to 'ngForOf' since it isn't a known property of 'div'.
           

5、在*ngFor 循环中绑定 index

*ngFor="let item of students,let i = index"
           

6、下拉刷新 ion-refresher标签

<ion-refresher (ionRefresh)="doRefresh($event)"> 
       <ion-refresher-content
           pullingIcon="arrow-dropdown"
           pullingText="下拉刷新"
           refreshingSpinner="circles"
           refreshingText="刷新..."> 
       </ion-refresher-content>
       <ion-refresher-content > 
   </ion-refresher-content>
   </ion-refresher>
           

doRefresh(e){
    setTimeout(()=>{e.complete()},2000)
  }
           

e.complete表示刷新完成

上拉刷新要在页面足够长的情况下才能用，不然会报错

<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
      <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="加载中..."> 
       </ion-infinite-scroll-content> 
   </ion-infinite-scroll>
           

7、pipes 管道的应用

建立管道文件 生成管道mudule

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

@Pipe({
  name: 'number',
})
export class NumberPipe implements PipeTransform {
  transform(value: any, ...args) {
    if(args[0]=='') return value+'piped';
    if(args[0]=='square') return value*value;
    if(args[0]=='cube') return value*value*value;
    return value
  }
}
           

管道module

import { NgModule } from '@angular/core';
import { NumberPipe } from './number/number';
@NgModule({
	declarations: [NumberPipe],
	imports: [],
	exports: [NumberPipe]
})
export class PipesModule {}
           

在app.module 引入pipes.module,然后你可以在项目任何组建和页面使用管道

<p>{{'2'|number:''}}</p>

8、监听html中值的变化触发事件

<ion-range [(ngModel)]="brightness" (ngModelChange)="change()">
           

或者直接用angular生命周期监听页面变量的变化

ngDoCheck(): void {console.log(this.brightness)}
           

9、angular 绑定class类名

<div class="top" [ngClass]="{'tutu':tttt}"

10、获取组件元素或者页面其他元素

<div #element></div>
           

import {Component, ElementRef,ViewChild,ViewChildren,QueryList} from '@angular/core';
           

@ViewChildren('element') barItems:QueryList<ElementRef>;
  @ViewChild('element') indicator:ElementRef;
           

11、接收值和向父组件弹射值

import {Component,Input, Output} from '@angular/core';
           

@Input()

set jieshou(data){
    console.log(data)
}


@Output() 

tanshe = new EventEmitter()
           

12、ionic3 中 modal的用法

使用模态框组件的js

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';//引入模块

import { ModalPage } from '../modal/modal'//引入自定义组件

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
  private name = 'we';

  constructor(public modalCtrl: ModalController) {}

  showModal(){
    let profileModal = this.modalCtrl.create(ModalPage, { userId: //modal显示效果是第一个参数,也就是自定义的组件        
    8675309,callBack:this.backing });
    profileModal.present();
    profileModal.onDidDismiss(e=>{//用此方法可以在Modal关闭时接收数据 下面是另一种方法
      console.log(66)
      this.name = e
    })
  }
  backing=(e)=>{//箭头函数 控制this指向本页面 用来接收modal中弹射的数据
    return new Promise((res,rej)=>{
      this.name = e
    })
  }
}
           

模态框的html 

<ion-header>
  <ion-navbar>
    <ion-title>modal</ion-title>
    <ion-buttons end>
      <button ion-button (click)="hide()">取消</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div>呵呵和{{id}}</div> //id 是从父组件接收的数据
  <div (click)="show('555')">234</div>
</ion-content>
           

模态框的js

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams ,ViewController} from 'ionic-angular';


@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html',
})
export class ModalPage {

  private id;
  private callBack;
  constructor(public navCtrl: NavController,
              public viewCtrl:ViewController,
              public navParams: NavParams) {
      this.id = navParams.get('userId')//获取数据
      this.callBack = navParams.get('callBack')//获取箭头函数 用来弹射数据
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalPage');
  }
  hide(){
    this.viewCtrl.dismiss('777') //这是比较规范的弹射数据方式
  }
  show(e){
    this.callBack(e) //这是不太规范的弹射数据方式
    this.viewCtrl.dismiss()
  }

}
           

13、ionic tab 页设置默认主页

<ion-tabs selectedIndex="1">
  <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="预测计划" tabIcon="disc"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="开奖走势" tabIcon="pulse"></ion-tab>
</ion-tabs>
           

14、angular 双向数据绑定 [(ngModel)]