Angular开发中的一些问题总结

setTimeout(()=>{
    ...function body...
}, 0);

<div echarts class="demo-chart" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>

onChartInit(ec) {
    this.echartsIntance = ec;
}

其中，this.echartsIntance就是当前的echarts实例对象。详情参考：ngx-echarts

eCharts组件定义点击事件，并将点击事件获得的值传递到全局变量中

onChartInit(ec) {
    this.echartsIntance = ec;
    ec.on('click', function(){
        ...function body...
    }, this)
}

on方法的第三个参数this，将匿名函数的上下文调整至整个component，从而使匿名函数内部可以访问到整个component中的属性及方法。详情参考：eCharts Documents

通过console.log(this)可以获得当前环境中的上下文。

通过函数的call()，apply()，bind()三个方法，都可以改变当前函数所处的上下文环境。

angular绑定时不更新视图的解决办法。

this.changeDetectorRef.detectChanges();

dateFormat(date) {
    if (date) {
        const _date = new Date(date);
        const _month = (_date.getMonth() + 1) <= 9 ? `0${(_date.getMonth() + 1)}` : _date.getMonth() + 1;
        const _day = _date.getDate() <= 9 ? `0${_date.getDate()}` : _date.getDate();
        return `${_date.getFullYear()}-${_month}-${_day}`;
    }else {
        return '';
    }
}

<div tabindex="0" onFocus="show()" onBlur="hiden()" class="dropmenu"> </div>

.dropmenu {
    // IE Browser
    hidefocus: true;

    // Other Broswer
    &:focus {
        outline: none;
    }
}

focus事件，blur事件都是属于form表单事件。div元素不存在tabindex属性导致了它不具有这些事件，添加上该属性即可。

该属性会导致div元素外层出现虚线或者淡蓝色变色，通过配置css样式中的outline属性（Chrome等主流浏览器），hidefocus属性（IE浏览器）隐藏即可。