angular2模块和共享模块详解


Posted in Javascript onApril 08, 2018

创建模块,用到了共享模块PostSharedModule,共享模块里面包含了2个公用的模块:文章管理模块和评论管理模块

1,创建一个模块testmodule.module.ts

import { CommonModule } from '@angular/common'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from "@angular/router"; 
import { <span style="color:#cc0000;"><strong>PostSharedModule </strong></span>} from '../shared/post.module'; 
import { testModule } from './testmodule.routes'; 
import { TestMainComponent } from './test-main/test-main.component'; 
import { PostTableService } from '../manage/post-table/services/post-table.service'; 
@NgModule({ 
 declarations: [ 
  TestMainComponent 
 ], 
 imports: [ 
   CommonModule, 
   <span style="color:#ff0000;">PostSharedModule</span>, 
   RouterModule.forChild(testModule) 
 ], 
 exports:[ 
  TestMainComponent 
 ], 
 providers: [ 
  PostTableService 
 ] 
}) 
export class TestModule { }

2.创建模块路由testmodule.routes.ts

import { TestMainComponent } from './test-main/test-main.component'; 
import { PostTableComponent } from '../manage/post-table/post-table.component'; 
import { CommentTableComponent } from '../manage/comment-table/comment-table.component'; 
export const testModule = [ 
  { 
    path:'', 
    component:TestMainComponent, 
    children: [ 
      { path: '',redirectTo:'posttable/page/1',pathMatch:'full'}, 
      { path: 'posttable/page/:page', component: PostTableComponent }, 
      { path: 'commenttable/page/:page', component: CommentTableComponent }, 
      { path: '**', redirectTo:'posttable/page/1' } 
    ] 
  } 
];

3.执行ng g c test-main,创建组件test-main,修改test-main.component.html

<a routerLink="posttable/page/1" class="list-group-item"><span class="badge">10000</span>文章管理</a> 
    <a routerLink="commenttable/page/1" class="list-group-item"><span class="badge">1000000</span>评论管理</a>

创建 共享模块post.module.ts 

import { NgModule } from '@angular/core'; 
import { ModalModule } from 'ng2-bootstrap'; 
import { PaginationModule } from 'ng2-bootstrap'; 
import { SharedModule } from './shared.module'; 
import { CommentTableComponent } from '../manage/comment-table/comment-table.component'; 
import { PostTableComponent } from '../manage/post-table/post-table.component'; 
@NgModule({ 
 imports:[  
  SharedModule, 
  ModalModule.forRoot(), 
  PaginationModule.forRoot() 
 ], 
 declarations:[  
  CommentTableComponent,  
  PostTableComponent 
 ], 
 exports:[  
  ModalModule, 
  PaginationModule, 
  CommentTableComponent,  
  PostTableComponent 
 ] 
}) 
export class PostSharedModule { 
  
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
js微信分享实现代码
Oct 11 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
vue下拉列表功能实例代码
Apr 08 #Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 #Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 #Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 #Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 #Javascript
Javascript实现运算符重载详解
Apr 07 #Javascript
Vue中使用Sortable的示例代码
Apr 07 #Javascript
You might like
生成sessionid和随机密码的例子
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
js模拟类继承小例子
2010/07/17 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
深入理解Python3中的http.client模块
2017/03/29 Python
Python内置函数delattr的具体用法
2017/11/23 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
使用索引有什么好处
2016/07/27 面试题
linux面试题参考答案(8)
2016/04/19 面试题
Python中如何定义一个函数
2016/09/06 面试题
小学生美德少年事迹
2014/02/02 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
劳资员岗位职责
2015/02/13 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
windows系统安装配置nginx环境
2022/06/28 Servers