angular2模块划分总结

angular2模块划分总结

---

1.模块之间交互较少

推荐使用：

• 使用router，因为交互少，相对独立，就要做到良好的封装 。

使用方法：

• xxx.ts文件中声明：import { Router } from ‘@angular/router’;
• xxx.html文件中使用路由插槽：< router-outlet>
• 创建一个路由ts文件，声明路由路径,例如:
  const appRoutes: Routes = [{path: ‘dev/index’,component: Index}];
• 然后export路由：
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
• 最后在app.module.ts中的@NgModule中的import里声明routing
• 此时在路由插槽界面就可以通过代码 router.navigate([‘dev/index’]);实现路由跳转

路由传参：

• 在声明时path含参，例如：path: ‘dev/index/:id’
  那么在router.navigate([‘dev/index/123456’])带参(只能带一个参数)
• 在跳转时带参，例如router.navigate([‘dev/index, { id: 123456}’])(可以带多个参数)

路由参数接受

• 在路由跳转到的界面可以通过Params接受参数，例如：route.params.forEach((params: Params) => {this.projectId = params[‘id’];});
  获取key值为‘id’的value值

2.模块之间交互频繁，存在明显的父子关系

推荐使用：

• 父组件通过标签调用子组件的selector

使用方法：

• 子组件中在@Component声明selector:’tag’属性，父组件则使用< tag>引用

父组件向子组件传参

• 在父组件的html中使用

子组件向父组件传参

• 在子组件的ts中使用@Output,例如：
  @Output() onVoted=new EventEmitter< boolean >();
  onVoted.emit(true);
  例子中子组件相当于触发父组件中子组件标签的事件并返回一个布尔变量true.
  父组件中可以使用. <tag (onVoted)="onVoted($event)"><\ tag >
  接受子组件的触发事件,$evevnt就是参数“true”

3.频繁调用的通用函数

推荐使用：

• 使用依赖注入，封装为service方便调用

使用方法：

• 使用@Injectable声明一个service类
• 全局使用：
  　　在app.module.ts的@NgModule里的providers中声明该服务
  局部使用：
  　　在引用服务的ts中的@Component里的provides中声明该服务
• 引用服务的ts中，在其constructor中实例化服务，例如：
  constructor(public httpService: HttpService）{}
  之后便可通过httpService.func()调用服务了