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