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系列(15) 函数(Functions)
Apr 12 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php常见的魔术方法详解
2014/12/25 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
企业给企业的表扬信
2014/01/13 职场文书
教师申诉制度
2014/01/29 职场文书
自我鉴定总结
2014/03/24 职场文书
优秀党员先进材料
2014/12/18 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
Python数据结构之队列详解
2022/03/21 Python
Redis实现一个账号只能登录一个设备
2022/04/19 Redis