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

附录1、问题处理

找不到@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 {}