路由传参
使用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 } }); 路由中传参数 /user/1?id=1
- this.router.navigate(['view', 1], { preserveQueryParams: true }); 默认值为false，设为true，保留之前路由中的查询参数/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会保持不变，但是传入的参数依然有效
- this.router.navigate(['/user',1], { replaceUrl: true }); 未设置时默认为true，设置为false路由不会进行跳转
获取query方式的参数
- 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. 创建指令文件
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 上的时候，背景色就出现了，而移开的时候，它消失了
使用 @Input 数据绑定向指令传递值
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;
}
/**
* 组件值产生变化后父组件改变
* @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()注解用于返回父组件变化后的值,创建output绑定事件,由组件绑定事件EventEmitter向父组件传输信息。 4.修改set方法，在set方法中增加“发射”事件方法，如this.myModelChange.emit(value);
注意: 属性名 + 后缀 Change是一个双向绑定的固定写法,使用时，就可以通过[(myModel)]=“我的变量” 进行双向绑定了。当然，如果想要做事件和属性绑定拆分也是可以的，用法如下：
<app-my-model [myModel]="myModel" (myModelChange)="onMyModelChange($event)"></app-my-model>
这里方法的第一个参数必须是"event"比较特殊,它表示的是我们在组件中emit的值。在ts中：
onMyModelChange(value: any) {
this.myModel = value;
}
- 简介 这里简单的介绍了代码极简化，以及制定自己想要的功能通过自定义管道来实现。
2.语法 关闭Angular项目 新建管道：ng generate pipe pipes/string-pi
3.需求
image.png
让福利这一列最多显示10个字，然后超过10个的会显示 ...
4.代码 管道ts文件：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'stringPi'
})
//这个管道就是截断数据为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;
}
}
- 调用：还是老套路，插值表达式，json点值，管道筛选
<td>{{info?.attraction | stringPi:10}}</td>
5.细解 首先在新建管道之后会拿到一个管道名字，一个架子，然后就是考验基本功的时候了。 这里使用了两种方法
方法一：
// if(value){ //value不为空
// return value.length>10?value.substr(0,args)+'...':value;
// }
// return null;
最传统的方法， 调用管道管道会返回 | 前面的值作为value ,不用管怎么来的反正就是拿到了，这里是info?.attraction 。 然后value接收之后使用一个三目运算符、一个substr成功截取
方法二：
return value && value.length>10?value.substr(0,args)+'...':value;
这一条语句就是使用了&&的特性（老师讲课与或非时可能说过:那个啥‘与’这个东西记住就行，先判断第一个值是否为true不是第二个值看都不用看肯定是返回false）。这里是先判断value是否为空，如果不是空就会执行？后面的代码。 这就是某些大神眼中的代码极简化追求。但是可读性大大的打折扣了。
还有这里调用管道时后面跟了个数：
<td>{{info?.attraction | stringPi:10}}</td>
这个数会被args拿到。然后你看到的又是一波骚操作：
args=args||10; //如果传入参数了就以传入的为准，没传就默认为10
