记录一些对于我自己来说,还挺实用的小技巧.
一、按钮可点与不可点之间的切换
需要给按钮设置 disabled="{{buttons.edit}}" 属性,buttons.edit == null 的时候,disabled该属性会失效,按钮可点击状态
可用于一些业务逻辑判断,而不是等接口判断之后再提示,可减少交互.
二、监听滑动(用于置顶或者置底等功能)
1.给需要监听的dom添加(scroll)属性
<div (scroll)="listenScroll($event)"></div>
listenScroll(el){
console.log(el.target.scrollTop)
}
2.通过指令实现
@Directive({ selector:'[onScroll]',})**
export class OnScrollDirective{**
@HostListener('scroll', ['$event']) **
public onscroll =($event)=>{console.log('通过HostListener监听'); }**
}
<div onScroll>
三、监听路由切换
//引入
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
<style>
.itemThree{
display:none
}
</sytle>
<div class="itemTwo" *ngIf="false">
...conding
</div>
<div class="itemThree">
...conding
<div>
this.twoDom = this.el.nativeElement.querySelector('.itemTwo');
this.twoDom = this.el.nativeElement.querySelector('.itemThree');
console.log(this.twoDom) //null
console.log(this.itemThree) //ElementRef 对象
所以得出结论ngIf指令其实是直接不渲染node,所以也没办法获取ElementRef对象。具体原因得深究ng的指令是如何操作的,这里就不多说.
如果想获取，使用样式的display：none实现
九.替换多个"br/"
replace(/[<br\/>]+/g,'<br/>');
