Angular4小技巧

记录一些对于我自己来说,还挺实用的小技巧.

一、按钮可点与不可点之间的切换

需要给按钮设置 disabled="{{buttons.edit}}" 属性,buttons.edit == null 的时候,disabled该属性会失效,按钮可点击状态

可用于一些业务逻辑判断,而不是等接口判断之后再提示,可减少交互.

二、监听滑动(用于置顶或者置底等功能)

1.给需要监听的dom添加(scroll)属性

listenScroll(el){ console.log(el.target.scrollTop) }

2.通过指令实现

@Directive({ selector:'[onScroll]',})**

export class OnScrollDirective{**

    @HostListener('scroll', ['$event']) **

    public onscroll =($event)=>{console.log('通过HostListener监听'); }**

}

三、监听路由切换

//引入

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

最简单的监听:

this.router.events.subscribe(event => {

if (event instanceof NavigationEnd) {

    // 每次路由跳转改变状态

    ......

  }

});

如果监听无效,可能是监听的component并不是根,这时候可以将代码放到ngOnInit内,而不是构造函数内。

更详细的ng路由监听攻略请戳这里

四、过滤输入框中的表情

var ranges =[

    '\ud83c[\udf00-\udfff]',

    '\ud83d[\udc00-\ude4f]',

    '\ud83d[\ude80-\udeff]'

] ;

    let emojireg =content .replace(new RegExp(ranges.join('|'),'g'),'');

    return emojireg;

五、模拟路由刷新的功能


this.router.navigate(['xxx']);

setTimeout(()=>{

    this.router.navigate([**xxx.url**]);

},110)

一般用于嵌套路由,原理其实就是先跳转到父路由,然后再利用定时器跳转到子路由。

六、angular4 事件绑定大全(持续收录)

(click)  //点击触摸事件

(ngModelChange)   //绑定变量发生变化后触发  

(change)  //一般用于值改变元素,比如select

(blur)  //失去焦点事件

(keyup.enter)  //回车触发事件

(keyup)  //键盘事件

(scroll)  //滑动触发

八.ngIf 和 display:none

HTML