Angular开发关键页面流程之创建模块

October 28, 2016 10:11 AM

简介

该流程基于Node -v 6.9.1，Npm -v 3.10.9 版本
以新增模板为例。

内容说明

1. 利用终端进入你所需要建造的模板的根目录下，输入：ng g module my-demo
   my-demo是我需要创建的模块
2. 打开你所建造的模块中的.html 文件，我的是my-demo.component.html 创建个div 而div的class名字用于在.scss文件中编写样式，
3. 打开你的*.scss文件，我的是my-demo.component.scss，然后根据你的需求进行样式的改变。
4. 打开你的 *.ts文件（书写函数时均在这个文件中实现），查看你ts文件中的@Component是否styleUrl指向的是css而非scss（利用VSCode创建的模块均指向了scss文件，请及时修改）以下是我的指向：

@Component({
selector: 'my-demo',
templateUrl: './my-demo.component.html',
styleUrls: ['./my-demo.component.css']
})
5. 注册路由，打开你所建造的模块的父目录下，找到*.routes.ts文件，（我的是建立在vod文件下所以我的模块路由是vod.routes.ts）首先将你的组件导入这个文件中 例：
import { MyDemoComponent } from './my-demo/my-demo.component';
然后将你的组件注册至路由中
{ path: '/vod/vod-category/vod-filter-dialog/:Mydemo', name: 'MyDemo', component: MyDemoComponent }
6. 申明，打开你所建造的模块的父目录下，找到*.module.ts（和刚刚注册路由的文件在一起）
导入组件import { MyDemoComponent } from './my-demo/my-demo.component';
在 declarations和entryComponents变量中进行申明
declarations: [
// MyDemoComponent组件申明
MyDemoComponent,
以及entryComponents申明：
entryComponents: [
VODCategoryComponent,
// MyDemoComponent申明
MyDemoComponent,
7. 申明之后就可以调用了，在你需要响应的事件中加入应用即可，举例说明：
例如我想通过RED_KEY按钮响应进行操作，只需调用跳转的方法即可：
case ‘RED_KEY’:
this.navController.push(‘MyDemo’);
break;
8. 按下对应的事件按钮，页面跳转成功。