路由傳參
使用routerLink跳轉
- <a routerLink=["/exampledetail",id]></a>
- <a routerLink=["/exampledetail",{queryParams:object}] ></a>
使用navigate跳轉
- this.router.navigate(['user', 1]); 以根路由為起點跳轉
- this.router.navigate(['user', 1],{relativeTo: route}); 默認值為根路由，設置后相對當前路由跳轉，route是ActivatedRoute的實例，使用需要導入ActivatedRoute
- this.router.navigate(['user', 1],{ queryParams: { id: 1 } }); 路由中傳參數(shù) /user/1?id=1
- this.router.navigate(['view', 1], { preserveQueryParams: true }); 默認值為false，設為true，保留之前路由中的查詢參數(shù)/user?id=1 to /view?id=1
- this.router.navigate(['user', 1],{ fragment: 'top' }); 路由中錨點跳轉 /user/1#top
- this.router.navigate(['/view'], { preserveFragment: true }); 默認值為false，設為true，保留之前路由中的錨點/user/1#top to /view#top
- this.router.navigate(['/user',1], { skipLocationChange: true }); 默認值為false，設為true路由跳轉時瀏覽器中的url會保持不變，但是傳入的參數(shù)依然有效
- this.router.navigate(['/user',1], { replaceUrl: true }); 未設置時默認為true，設置為false路由不會進行跳轉
獲取query方式的參數(shù)
- snapshot
import { ActivateRoute } from '@angular/router';
public id: any;
constructor( public activeRoute: ActivateRoute ) { };
ngOnInit(){
this.id= this.activeRoute.snapshot.params['id'];
};
- queryParams
ngOnInit(){
this.activeRoute.queryParams.subscribe(params => {
this.id = params['id'];
});
Ionic 封裝的頁面跳轉
NavController簡介
使用NavController需要先注入，其常用的方法如下：
back()：返回上一頁面
navigateForward()：前進到一個新頁面
navigateRoot()：進入一個新頁面并且清除歷史頁面，即不能再返回到之前的頁面了。具體代碼如下：
export class HomePage {
a = 'color:red';
constructor(private navController: NavController) {}
toTest(){
this.navController.navigateForward('test');
this.navController.
}
}
Angular 自定義指令
1. 創(chuàng)建指令文件
ng generate directive highlight
2.在highlight.directive.ts 中加入自定義樣式（使用 HostListener 裝飾器添加兩個事件處理器，它們會在鼠標進入或離開時進行響應）
import { Directive, ElementRef, **HostListener** } from '@angular/core';
@Directive({
selector: '[**appHighlight**]'
})
export class HighlightDirective {
@Input('**appHighlight**') **highlightColor**: string; //highlightColor是appHighlight指令的別名
constructor(private el: ElementRef) {
// el.nativeElement.style.backgroundColor = 'yellow';
}
private **highlight**(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
@HostListener('mouseenter') onMouseEnter() {
this.highlight(**this.highlightColor**);
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
}
3.在app.module.ts 中引入指令文件
import { HighlightDirective } from './highlight.directive';
declarations:[ HighlightDirective ]
4.在app.component.html 中應用指令
<p **appHighlight**>Highlight me!</p> // 直接應用
5.運行本應用并確認：當把鼠標移到 p 上的時候，背景色就出現(xiàn)了，而移開的時候，它消失了
使用 @Input 數(shù)據(jù)綁定向指令傳遞值
6.在app.component.ts中定義屬性
color = 'yellow';
7. 在app.component.html 中應用指令
<p [appHighlight]="color" > Highlight me!</p>
自定義組件
在自定義中,常常要使用到自定義雙向綁定,那么要怎么做呢?其實代碼也很簡單,先直接來看代碼 定義雙向綁定代碼:
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-my-model',
templateUrl: './my-model.component.html',
styleUrls: ['./my-model.component.scss']
})
export class MyModelComponent implements OnInit {
/**
* 自定義model變量
*/
private _myModel;
/**
* 返回父組件變化后的值
*/
@Input()
get myModel() {
return this._myModel;
}
/**
* 組件值產(chǎn)生變化后父組件改變
* @param value
*/
set myModel(value) {
this._myModel = value;
this.myModelChange.emit(value);
}
@Output()
myModelChange: EventEmitter<any> = new EventEmitter();
constructor() {
}
ngOnInit() {
}
}
使用
<app-my-model [(myModel)]="myModel"></app-my-model>
步驟:
1.自定義一個變量,如myModel
2.為變量設置get/set方法 3.在get方法上增加@Input()注解用于返回父組件變化后的值,創(chuàng)建output綁定事件,由組件綁定事件EventEmitter向父組件傳輸信息。 4.修改set方法，在set方法中增加“發(fā)射”事件方法，如this.myModelChange.emit(value);
注意: 屬性名 + 后綴 Change是一個雙向綁定的固定寫法,使用時，就可以通過[(myModel)]=“我的變量” 進行雙向綁定了。當然，如果想要做事件和屬性綁定拆分也是可以的，用法如下：
<app-my-model [myModel]="myModel" (myModelChange)="onMyModelChange($event)"></app-my-model>
這里方法的第一個參數(shù)必須是"event"比較特殊,它表示的是我們在組件中emit的值。在ts中：
onMyModelChange(value: any) {
this.myModel = value;
}
- 簡介 這里簡單的介紹了代碼極簡化，以及制定自己想要的功能通過自定義管道來實現(xiàn)。
2.語法 關閉Angular項目 新建管道：ng generate pipe pipes/string-pi
3.需求
image.png
讓福利這一列最多顯示10個字，然后超過10個的會顯示 ...
4.代碼 管道ts文件：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'stringPi'
})
//這個管道就是截斷數(shù)據(jù)為10
export class StringPiPipe implements PipeTransform {
transform(value: any, args?: any): any {
args=args||10;
//方法一
// if(value){ //value不為空
// return value.length>10?value.substr(0,args)+'...':value;
// }
// return null;
//方法二
return value && value.length>10?value.substr(0,args)+'...':value;
}
}
- 調(diào)用：還是老套路，插值表達式，json點值，管道篩選
<td>{{info?.attraction | stringPi:10}}</td>
5.細解 首先在新建管道之后會拿到一個管道名字，一個架子，然后就是考驗基本功的時候了。 這里使用了兩種方法
方法一：
// if(value){ //value不為空
// return value.length>10?value.substr(0,args)+'...':value;
// }
// return null;
最傳統(tǒng)的方法， 調(diào)用管道管道會返回 | 前面的值作為value ,不用管怎么來的反正就是拿到了，這里是info?.attraction 。 然后value接收之后使用一個三目運算符、一個substr成功截取
方法二：
return value && value.length>10?value.substr(0,args)+'...':value;
這一條語句就是使用了&&的特性（老師講課與或非時可能說過:那個啥‘與’這個東西記住就行，先判斷第一個值是否為true不是第二個值看都不用看肯定是返回false）。這里是先判斷value是否為空，如果不是空就會執(zhí)行？后面的代碼。 這就是某些大神眼中的代碼極簡化追求。但是可讀性大大的打折扣了。
還有這里調(diào)用管道時后面跟了個數(shù)：
<td>{{info?.attraction | stringPi:10}}</td>
這個數(shù)會被args拿到。然后你看到的又是一波騷操作：
args=args||10; //如果傳入?yún)?shù)了就以傳入的為準，沒傳就默認為10
