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 27 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
vuejs如何配置less
Apr 25 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
js+html实现点名系统功能
Nov 05 Javascript
JS实现长图上下滚动效果
Mar 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
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Pytorch之parameters的使用
2019/12/31 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
python在地图上画比例的实例详解
2020/11/13 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
心理健康课教学反思
2014/02/13 职场文书
应急管理培训方案
2014/06/12 职场文书
单位委托书格式范本
2014/09/29 职场文书
2015年教务工作总结
2015/05/23 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android