angular 及ionic 3

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

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

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

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

 

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

代码方式跳转

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标签

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

e.complete表示刷新完成

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

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,然后你可以在项目任何组建和页面使用管道

{{'2'|number:''}}

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

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

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

9、angular 绑定class类名

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

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

  @ViewChildren('element') barItems:QueryList;
  @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 

  
    modal
    
      取消
    
  



  
呵呵和{{id}}
 //id 是从父组件接收的数据
  
234

模态框的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 页设置默认主页

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