angular开发必会干货

2021-02-08  本文已影响0人  凌航

路由传参

使用routerLink跳转

使用navigate跳转

  1. this.router.navigate(['user', 1]); 以根路由为起点跳转
  2. this.router.navigate(['user', 1],{relativeTo: route}); 默认值为根路由，设置后相对当前路由跳转，route是ActivatedRoute的实例，使用需要导入ActivatedRoute
  3. this.router.navigate(['user', 1],{ queryParams: { id: 1 } }); 路由中传参数 /user/1?id=1
  4. this.router.navigate(['view', 1], { preserveQueryParams: true }); 默认值为false，设为true，保留之前路由中的查询参数/user?id=1 to /view?id=1
  5. this.router.navigate(['user', 1],{ fragment: 'top' }); 路由中锚点跳转 /user/1#top
  6. this.router.navigate(['/view'], { preserveFragment: true }); 默认值为false，设为true，保留之前路由中的锚点/user/1#top to /view#top
  7. this.router.navigate(['/user',1], { skipLocationChange: true }); 默认值为false，设为true路由跳转时浏览器中的url会保持不变，但是传入的参数依然有效
  8. this.router.navigate(['/user',1], { replaceUrl: true }); 未设置时默认为true，设置为false路由不会进行跳转

获取query方式的参数

  1. snapshot
import { ActivateRoute } from '@angular/router';
public id: any;
constructor( public activeRoute: ActivateRoute ) { };
ngOnInit(){
 this.id= this.activeRoute.snapshot.params['id'];
};
  1. 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;

}
  1. 简介 这里简单的介绍了代码极简化，以及制定自己想要的功能通过自定义管道来实现。

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;

 }

 }

<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

注：以上内容参考网上其他人文件以及同事文件，比较复杂，就不作转载了，敬请谅解

上一篇下一篇

猜你喜欢

热点阅读