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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
js使用ajax读博客rss示例
May 06 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
详解JavaScript对象类型
Jun 16 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
详解async/await 异步应用的常用场景
May 13 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
php操作mysqli(示例代码)
2013/10/28 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
php命令行模式代码实例详解
2021/02/26 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python中property属性实例解析
2018/02/10 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
python实现局域网内实时通信代码
2019/12/22 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python绘制动态水球图过程详解
2020/06/03 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
消防安全员岗位职责
2014/03/10 职场文书
我爱读书演讲稿
2014/05/07 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
生活部的活动方案
2014/08/19 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
学生安全责任协议书
2016/03/22 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js