2017年4月28日修复bug
- 如下图两张图的位置,分别是修改前和修改后
- 此bug在ios真机上会导致按钮、checkbox等被点击多次,有几个子module就会触发几次.所以只保留主module(
app.module.ts
)上的forRoot(MyApp)
修改前
![](https://img.haomeiwen.com/i4108891/4c1c67d5b13a7a7f.png)
背景
- 用ionic2开发过一两个小功能的朋友都会发现,每新建一个页面都需要在
\src\app\app.module.ts
中添加页面对应的class - 当app页面很多时都会感觉比较乱,分不清哪跟哪.更让人接受不了的是当多人同时开发,经常修改
app.module.ts
,会经常造成代码冲突 - 所以我们需要把页面按模块再细分
代码结构
- 我的app按功能分了4个子模块,分别为
contact
、home
、login
和mine
.具体代码结构如下图
按模块划分创建多个子模块
代码详情
- 如下图,以
home.module.ts
代码为例,注意不同颜色的标注 -
新建的子module,记得要添加到总模块中
home.module.ts
其他
- 完整代码已上传到github
由于ionic版本更新较快,有些写法可能改变来不及更新简书,请以github代码为准
- ionic3出了一个IonicPage很实用,不用导入每个页面到总module中了.还可以做延迟加载
网友评论
Unexpected module 'ContactModule in /Users/kevin/Documents/Demo/module_demo/src/pages/contact/contact.module.ts' declared by the module 'AppModule in /Users/kevin/Documents/Demo/module_demo/src/app/app.module.ts'. Please add a @Pipe/@Directive/@Component annotation.
import { HighlightDirective } from '../../directive/highlight.directive';
@NgModule({
declarations: [
Login,
HighlightDirective
],
})
export class LoginModule {}
但是在另外的一个子模块中再次引用的时候就会报错:Type HighlightDirective is part of the declarations of 2 modules: LoginModule and HomeModule! Please consider moving HighlightDirective to a higher module that imports LoginModule and HomeModule. You can also create a new NgModule that exports and includes HighlightDirective then import that NgModule in LoginModule and HomeModule.,然后我将这2个模块的引用去掉了,在app.module.ts中引用了directive:
import { HighlightDirective } from '../directive/highlight.directive';
@NgModule({
declarations: [
MyApp,
HighlightDirective
]
...
})
export class AppModule {}
还是报错,Unhandled Promise rejection: Template parse errors:
Can't bind to 'myHighlight' since it isn't a known property of 'p'.
请教下LZ,我这个该怎么引用?
方式一:
在index.html引用echarts.min.js,
然后在ts文件顶部声明一个全局echarts变量,declare var echarts;
最后就可以使用 echarts.init初始化图表了
方式二:
使用命令 typings search echarts 搜索echarts
然后按http://www.jianshu.com/p/a14b438db0a0这里介绍的方法尝试.