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 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
3种js实现string的substring方法
Nov 09 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
js实现菜单跳转效果
Dec 11 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
数据库相关问题
2006/10/09 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
python中Genarator函数用法分析
2015/04/08 Python
Python的高阶函数用法实例分析
2019/04/11 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python绘制组合图的示例
2020/09/18 Python
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
高三地理教学反思
2014/01/11 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
2014年残联工作总结
2014/11/21 职场文书
预备党员群众意见
2015/06/01 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python