Angular2/Ionic2集成Promact/md2.md

最近想找一套比较完整的基于Material风格的Angular2的控件库,有两个选择一个是Angular官方的Material2,但是这套库的DatePicker控件目前只能支持年月日,不支持时分秒,所以就找到本篇要介绍的Promact/md2。下面介绍一下如何进行集成。

1. 集成

在工程根目录执行如下命令,下载相关依赖:

npm install --save md2

然后在Module中引入如下Module:

import { Md2Module }  from 'md2';
@NgModule({
  imports: [
    ...,
    Md2Module,
  ],
  ...
})
export class AppModule { }

好了,不需要做任何其他的工作了,现在就可以是用来了。
具体的使用可以参照官方的实例,对应的代码

2. 兼容性问题

官方的声明看起来是复制的angular material2的声明,声称是支持IE11和Edge,但是实际上测试时有问题的,Tab和DatePicker会报错,Tooltip直接就是不能用的。
Tooltip暂时没有找解决方案,对于Tab和DatePicker在IE11和Edge浏览器下出错的解决方案如下。

2.1. md2的日期控件报错解决方案

解决方案:
在工程中找到如下文件:
node_modules\ionic-angular\tap-click\ripple.js, 修改如下方法:

RippleActivator.prototype._downAction = function (ev, activatableEle, startCoord) {
RippleActivator.prototype._upAction = function (ev, activatableEle, startCoord) {

将其中的如下代码:

if (rippleEle.classList.contains('button-effect')) {

修改为如下:

if (!!rippleEle && !!rippleEle.classList 
    && !!rippleEle.classList.contains 
    && rippleEle.classList.contains('button-effect')) {

2.2. md2的Tab控件报错解决方案

解决方案:
在工程中找到如下两个文件:

G:\ionicDemo\MyIonicProject\node_modules\md2\bundles\md2.umd.js
G:\ionicDemo\MyIonicProject\node_modules\md2\tabs\tabs.js

找到如下方法:

Md2Tabs.prototype.updatePagination

修改为:

Md2Tabs.prototype.updatePagination = function () {
	var canvasWidth = this.element.root.clientWidth;
	if(!!this.element.tabs.forEach){
		this.element.tabs.forEach(function (tab) {
			canvasWidth -= tab.offsetWidth;
		});
	}
	this._shouldPaginate = canvasWidth < 0;
};

3. 部分控件独立集成

因为md2相对于angular官方的material2最大的优势就是DatePicker,其他控件在浏览器兼容性上没有material2好,除了上面第2节描述的问题外,在IE下有部分的动画效果消失了,使用起来有卡顿干,所以决定只引入md2的DatePicker控件,其他的使用material2的控件。
那么如何只引入DatePicker呢?
第1节集成中,我们import了如下module:

import { Md2Module }  from 'md2';

通过visual studio code代码跟踪,可以直接进入定义文件,定位到的文件是module.d.ts,进一步找到其实际的定义文件module.js,在这个文件中我们可以找到如下定义:

import { Md2AccordionModule } from './accordion/index';
import { Md2AutocompleteModule } from './autocomplete/index';
import { Md2ChipsModule } from './chips/index';
import { Md2CollapseModule } from './collapse/index';
import { Md2ColorpickerModule } from './colorpicker/index';
import { Md2DataTableModule } from './data-table/index';
import { Md2DatepickerModule } from './datepicker/index';
import { Md2DialogModule } from './dialog/index';
import { Md2MenuModule } from './menu/index';
import { Md2SelectModule } from './select/index';
import { Md2TabsModule } from './tabs/index';
import { Md2TagsModule } from './tags/index';
import { Md2ToastModule } from './toast/index';
import { Md2TooltipModule } from './tooltip/index';
import { PlatformModule } from './core/platform/index';
import { StyleModule } from './core/style/index';

这样我们就可以参照这里,需要哪个控件,引入哪个控件对应的module就可以了。
例如我们上面说的想单独引入DatePicker,那么就在自己工程的Module中添加如下Module的引用:

import { Md2DatepickerModule } from 'md2/datepicker/index';
@NgModule({
  imports: [
    ...,
    Md2DatepickerModule,
  ],
  ...
})
export class AppModule { }

附录一、问题处理

找不到@angular/animations

部分反映集成后报错,提示找不到@angular/animations,可以执行如下命令解决。

npm install @angular/animations --save

然后在app.module.ts中增加引入:

 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 @NgModule({
  ...
  imports: [
    ...
    BrowserAnimationsModule,
    ...
  ],
  ...
})
export class AppModule {}
posted @ 2017-05-25 15:47  Gavin·Gong  阅读(629)  评论(0编辑  收藏