記錄一些對(duì)于我自己來(lái)說(shuō),還挺實(shí)用的小技巧.
一璧函、按鈕可點(diǎn)與不可點(diǎn)之間的切換
需要給按鈕設(shè)置 disabled="{{buttons.edit}}" 屬性,buttons.edit == null 的時(shí)候,disabled該屬性會(huì)失效,按鈕可點(diǎn)擊狀態(tài)
可用于一些業(yè)務(wù)邏輯判斷,而不是等接口判斷之后再提示,可減少交互.
二钮蛛、監(jiān)聽(tīng)滑動(dòng)(用于置頂或者置底等功能)
1.給需要監(jiān)聽(tīng)的dom添加(scroll)屬性
<div (scroll)="listenScroll($event)"></div>
listenScroll(el){
console.log(el.target.scrollTop)
}
2.通過(guò)指令實(shí)現(xiàn)
@Directive({ selector:'[onScroll]',})**
export class OnScrollDirective{**
@HostListener('scroll', ['$event']) **
public onscroll =($event)=>{console.log('通過(guò)HostListener監(jiān)聽(tīng)'); }**
}
<div onScroll>
三盯荤、監(jiān)聽(tīng)路由切換
//引入
import {Router,NavigationEnd}from '@angular/router';
最簡(jiǎn)單的監(jiān)聽(tīng):
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
// 每次路由跳轉(zhuǎn)改變狀態(tài)
......
}
});
如果監(jiān)聽(tīng)無(wú)效,可能是監(jiān)聽(tīng)的component并不是根,這時(shí)候可以將代碼放到ngOnInit內(nèi),而不是構(gòu)造函數(shù)內(nèi)呕臂。
更詳細(xì)的ng路由監(jiān)聽(tīng)攻略請(qǐng)戳這里
四巨缘、過(guò)濾輸入框中的表情
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)
一般用于嵌套路由,原理其實(shí)就是先跳轉(zhuǎn)到父路由,然后再利用定時(shí)器跳轉(zhuǎn)到子路由算柳。
六、angular4 事件綁定大全(持續(xù)收錄)
(click) //點(diǎn)擊觸摸事件
(ngModelChange) //綁定變量發(fā)生變化后觸發(fā)
(change) //一般用于值改變?cè)?比如select
(blur) //失去焦點(diǎn)事件
(keyup.enter) //回車(chē)觸發(fā)事件
(keyup) //鍵盤(pán)事件
(scroll) //滑動(dòng)觸發(fā)
八.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 對(duì)象
所以得出結(jié)論ngIf指令其實(shí)是直接不渲染node,所以也沒(méi)辦法獲取ElementRef對(duì)象翠勉。具體原因得深究ng的指令是如何操作的,這里就不多說(shuō).
如果想獲取妖啥，使用樣式的display：none實(shí)現(xiàn)
九.替換多個(gè)"br/"
replace(/[<br\/>]+/g,'<br/>');
