angular2项目实践汇总-2

1.angular2中事件监听
用属性指令
如监听鼠标滚动的事件
scroll.directive.ts

import { Directive, HostListener, ElementRef, Input, EventEmitter, Output } from '@angular/core';

@Directive({
    selector: '[appScroll]'
})
export class ScrollDirective {
    @Output() onMousewheel: EventEmitter<any> = new EventEmitter<any>();

    constructor(private el: ElementRef) {}

    @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
        this.onMousewheel.emit(event);
    }
}

2.关于ng2中的[hidden]指令
改指令为true的时候，和css的display：block属性一样，权重也一样
所以样式有可能被覆盖导致不生效！ng2官网说明这是讲控制权交给开发者，所以使用的时候要小心，或者建议改成用*ngIf

3.ES5中新增的Array方法
数组forEach，不能通过return跳出循环，改成用some或者every，
return false继续循环（相当于continue），return true跳出循环（相当于break）
some和every的区别在于some要求部分匹配,every要求全部匹配
参考https://segmentfault.com/q/1010000006165646（关于return true和return false的说法反了）；
filterfilter不改变数组本身，想获取处理结果，需要拿变量去接收

4.angular2中以post请求，传参接收不到
原因：Content-Type不一致
参考 angular2 post以“application/x-www-form-urlencoded”形式传参的解决办法
简述：SpringMVC接收参数的默认形式是application/x-www-form-urlencoded，angular1.x和2.0默认都是application/json形式，所以后台接收不到参数
手动更改Content-Type，贴上我封装的post方法(代码中还添加了access-token)

postForm(action: string, params = {}, contentType = 'application/x-www-form-urlencoded') {
        let headers = new Headers({ 'Content-Type': contentType, 'access-token': this.getToken() });
        let options = new RequestOptions({ headers: headers });
        let queryString = '';
        for (let i in params) {
            if (params[i]) {
                queryString += '&' + i + '=' + params[i];
            }
        }
        return this.http.post(REQUEST_URL[action], queryString, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

5.Date对象判断是否同一天
// str为毫秒数
new Date(str).toDateString() === new Date().toDateString()

6.p标签，文字超出一行将不显示，慎用

7.=复制a=b，当a的值改变，b也会跟着变，自己封装一个clone，

COMMON.clone(item: any)=>{
retuen JSON.parse(JSON.stringfy(item));
}

8.设置透明颜色，如透明边框、透明背景、颜色：transparent

9.css position:absolute 如何居中对齐
先写死宽度

positiom: absolute;
left: 50%
width: 980px;
margin-left: -490px;
text-align: center;

10.angular2项目中url如何去掉#
在app.module.ts文件中,引入路由模块是，

RouterModule.forRoot(ROUTES, { useHash: true })

将参数useHash改成false

angular2项目实践汇总-2

推荐阅读更多精彩内容