最近想找一套比较完整的基于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 {}

Angular2/Ionic2集成Promact/md2.md的更多相关文章

  1. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

  2. angular2+ionic2架构介绍

    不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2+typescript 2. 项目结构 3. S ...

  3. 自动化打包 Jenkins 持续集成 Git Gradle MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  4. ionic2集成极光推送

    ionic2集成极光推送: ionic2api:https://ionicframework.com/docs/ 极光推送官网:https://www.jiguang.cn android-怎么注册极 ...

  5. Ionic2集成ngx-datatable,ng2-tree第三方控件.md

    1. 基本环境配置 1.1. 命令安装相应的依赖 1.2. 在Module定义中引入对应Module 1.3. 引入对应的CSS 2. 简单使用示例验证是否集成成功 2.1. ngx-datatabl ...

  6. Ionic2集成ArcGIS JavaScript API.md

    1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...

  7. ionic2集成sdk后,连接超时的问题

    这几天在测试app的时候,偶尔会发现集成的好视通sdk在进入会议室的时候出现连接超时的问题,一直卡在‘正在获取版本信息’的页面,经反复测试后这种现象主要出现在点击返回按钮和退出登录按钮的时候会出现,也 ...

  8. Ionic2中的Navigation.md

    1. 概述 为了能够得到同原生应用类似的导航效果,Ionic创建了几个navagation组件来实现pages之间的导航操作,这种导航跟原生Angular2中的route机制是不一样的,我们可以借助于 ...

  9. 【前端】Angular2 Ionic2 学习记录

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/angular2_ionic2.html 一.建立项目 ionic start ProductName super ...

随机推荐

  1. MapReduce(十六): 写数据到HDFS的源代码分析

    1)   LineRecordWriter负责把Key,Value的形式把数据写入到DFSOutputStream watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  2. JDBC-连接数据库代码

    package com.zxc.connection; import java.sql.Connection; import java.sql.DriverManager; public class ...

  3. HDUOj 看病要排队 优先队列的使用 题目1873

    STL优先队列的具体描写叙述 http://blog.csdn.net/yueloveme/article/details/47106639 题目地址:http://acm.hdu.edu.cn/s ...

  4. Python——异常基础

    异常基础 在Python中,异常会依据错误自己主动地被触发.也能由代码触发和截获.异常由五个语句处理: 1.[try/except]:捕捉由Python或你引起的异常并恢复. 2.[try/final ...

  5. Mosquito的优化——epoll优化(七)

    本文由逍遥子撰写,转发请标注原址: http://blog.csdn.net/houjixin/article/details/46413583 或 http://houjixin.blog.163. ...

  6. Oracle RAC集群体系结构

    一. Oracle集群体系结构 Oracle RAC,全称是Oracle Real Application Cluster,即真正的应用集群,是oracle提供的一个并行集群系统,整个集群系统由Ora ...

  7. mysql 修改默认的引擎

      需求: mysql 的默认的引擎为MyISAM  虽然该引擎访问的速度快,但并不支持存储事物,也不支持外键,所以我们修改为innob Linux修改MySql默认存储引擎为InnoDB     一 ...

  8. 特斯拉正加快部署第三代Autopilot自动驾驶计算机

    新浪科技讯,北京时间 4 月 10 日下午消息,据电动汽车新闻网站 Electrek 报道,特斯拉正在加快部署第三代 Autopilot 自动驾驶计算机,因为当前一代产品的计算能力即将被耗尽. 201 ...

  9. caioj 1161 欧拉函数3:可见点数

    (x, y)被看到仅当x与y互质 由此联想到欧拉函数 x=y是1个点,然后把正方形分成两半,一边是φ(n) 所以答案是2*∑φ(n)+1 #include<cstdio> #include ...

  10. fileOP

    public void getFileDir(String filePath) { try{ this.tv.setText("当前路径:"+filePath);// 设置当前所在 ...