在某些情况下,ionic自身的逻辑可能不符合项目的需求,并且无法通过前台代码去解决的时候,我们只能通过修改ionic的源码来实现功能。
建议先通过未编译过的ts版源码查找问题,源码:https://github.com/ionic-team/ionic/blob/v3/src。可以克隆到本地查看,也可以在github上查看。
然后在项目的 node_modules/ionic-angular 中找到ts对应的js文件,即编译后的源码。一般都在同名的 .js 文件内,部分装饰器在 .metadata.json 内(如@IonicPage、@Input)。
使用build打包时,CLI会使用 .metadata.json 的装饰器内容进行发布,即修改了 .js 部分的装饰器,还要把 .metadata.json 部分的装饰器也修改一遍。
以 tab 的 _viewAttachToDOM 方法为例
github源码
_viewAttachToDOM(viewCtrl: ViewController, componentRef: ComponentRef < any >, viewport: ViewContainerRef) {
const isTabSubPage = (this._tabsHideOnSubPages && viewCtrl.index > 0);
if (isTabSubPage) {
viewport = this.parent.portal;
}
super._viewAttachToDOM(viewCtrl, componentRef, viewport);
if (isTabSubPage) {
// add the .tab-subpage css class to tabs pages that should act like subpages
const pageEleRef = viewCtrl.pageRef();
if (pageEleRef) {
this._renderer.setElementClass(pageEleRef.nativeElement, 'tab-subpage', true);
}
}
}
node_modules源码
Tab.prototype._viewAttachToDOM = function (viewCtrl, componentRef, viewport) {
var isTabSubPage = (this._tabsHideOnSubPages && viewCtrl.index > 0);
if (isTabSubPage) {
viewport = this.parent.portal;
}
_super.prototype._viewAttachToDOM.call(this, viewCtrl, componentRef, viewport);
if (isTabSubPage) {
// add the .tab-subpage css class to tabs pages that should act like subpages
var pageEleRef = viewCtrl.pageRef();
if (pageEleRef) {
this._renderer.setElementClass(pageEleRef.nativeElement, 'tab-subpage', true);
}
}
};
修改node_modules的源码后记得不要使用npm install更新package,否则npm会重新覆盖已修改的源码。
能不修改源码就尽量不修改,但ionic已经半年多没更新v3了,只能自己动手解决了