angular7+ionc4 开发笔记

Config

1、手机刘海背景

//config.xml
    <preference name="StatusBarOverlaysWebView" value="true" />
    <preference name="StatusBarBackgroundColor" value="#48969a" />
    ....
    <plugin name="cordova-plugin-statusbar" spec="2.4.3" />

//app.component.ts
  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.statusBar.styleLightContent();
      this.splashScreen.hide();
    });
  }

Ionic4 中内置的生命周期函数：

ionViewWillEnter —当进入一个页面时触发(如果它从堆栈返回) ionViewDidEnter —进入后触发 ionViewWillLeave —如果页面将离开触发 ionViewDidLeave — 在页面离开后触发 ionViewWillUnload — 页面卸载的时候会触发，如果无法触发使用 ngOnDestroy

Ionic4 可以使用的 Angular 生命周期函数

1、ngOnChanges 当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发
2、ngOnInit 请求数据一般放在这个里面 （重要*）
3、ngDoCheck 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应
4、ngAfterContentInit 当把内容投影进组件之后调用
5、ngAfterContentChecked 每次完成被投影组件内容的变更检测之后调用
6、ngAfterViewInit 初始化完组件视图及其子视图之后调用（dom 操作放在这个里面）（重 要）
7、ngAfterViewInit 每次做完组件视图和子视图的变更检测之后调用
8、ngOnDestroy 组件销毁后执行 （重要）

更换资源

1、更换app图标

更换resources中的icon图片，执行 ionic cordova resources

路由

一、 页面跳转

1、get传值

1、跳转

<li *ngFor="let item of list;let key=index;">
      <!-- <a href="/newscontent?aid=123">{{key}}--{{item}}</a> -->
          
      <a [routerLink]="['/newscontent']" [queryParams]="{aid:key}">{{key}}--{{item}}</a>

 </li>

2、接收

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

  constructor(public route:ActivatedRoute) { }

  this.route.queryParams.subscribe((data)=>{

       console.log(data);
  })

2、动态路由

1、配置动态路由

   {
    path:'newscontent/:aid',component:NewscontentComponent
  }

2、跳转

    <ul>
    <li *ngFor="let item of list;let key=index;">

      <a [routerLink]="[ '/newscontent/', key ]">{{key}}---{{item}}</a>

    </li>
  </ul>

3、接收

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

    constructor(public route:ActivatedRoute) { }

    this.route.params.subscribe((data)=>{

          console.log(data);
    })

二、 js跳转

动态路由的 js 跳转

1. 引入

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

2.初始化

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

3.路由跳转

this.router.navigate(['/news', hero.id]);

路由 get 传值 js 跳转

1.引入 NavigationExtras

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

2.定义一个 goNewsContent 方法执行跳转，用 NavigationExtras 配置传参。

goNewsContent(){
	let navigationExtras: NavigationExtras = { queryParams: { 'session_id': '123' }, fragment: 'anchor' };
	this.router.navigate(['/news'],navigationExtras);
}

3.获取 get 传值

constructor(private route: ActivatedRoute) { console.log(this.route.queryParams); }

modal

1、子页面接受参数

import  { NavParams } from ‘@ionic/angular’


constructor( public navParams :  NavParams ){	
	console.log(this.navParams )
}

1、子页面关闭modal

doClose(){
	this.navParams.data.modal.dismiss()
}

父子组件

一、父组件给子组件传值-@input

父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件

1. 父组件调用子组件的时候传入数据

    <app-header [msg]="msg"></app-header>

2. 子组件引入 Input 模块

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

3. 子组件中 @Input 接收父组件传过来的数据

export class HeaderComponent implements OnInit {

	@Input() msg:string
	
	constructor() { }
	ngOnInit() {
	}
}

4. 子组件中使用父组件的数据

<h2>这是头部组件--{{msg}}</h2>

二、子组件通过@Output 触发父组件的方法

1.子组件引入 Output 和 EventEmitter

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

2.子组件中实例化 EventEmitter

@Output() private outer=new EventEmitter<string>();

用 EventEmitter 和 output 装饰器配合使用 指定类型变量

3.子组件通过 EventEmitter 对象 outer 实例广播数据

sendParent(){ // alert('zhixing'); this.outer.emit('msg from child') }

4.父组件调用子组件的时候，定义接收事件 ,outer 就是子组件的 EventEmitter 对象 outer

<app-header (outer)="runParent($event)"></app-header>

5.父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据

//接收子组件传递过来的数据 runParent(msg:string){ alert(msg); }

三、父组件通过@ViewChild 主动获取子组 件的数据和方法

1.调用子组件给子组件定义一个名称

<app-footer #footerChild></app-footer>

2 引入 ViewChild

import { Component, OnInit ,ViewChild} from '@angular/core';  

3.ViewChild 和刚才的子组件关联起来

@ViewChild('footerChild') footer;

4.调用子组件

run(){
	this.footer.footerRun();
}

四、非父子组件通讯

1、公共的服务
2、Localstorage(推荐)
3、Cookie

五、service 缓存数据

services:

//app/services/storage-msg.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StorageMsgService {

  private inputData: string;

  constructor() { }

  setInputValue(value) {
    this.inputData = value;
  }

  getInputValue() {
    return this.inputData;
  }
  
}

use:

import { StorageMsgService } from '../../services/storage-msg.service'
...
export class PersonalMsgComponent implements OnInit {

  constructor(
    private appService: StorageMsgService
  ) { }

  ngOnInit() {
  //use
    if( this.appService.getInputValue()){
      var array:any = this.appService.getInputValue()
      this.name = array.name
      this.password = array.password
    }
  }
  
 //set
 set() {
    this.appService.setInputValue(this.user.value);
  }
}