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 {}