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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
js实现可爱的气泡特效
Sep 05 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
php实现的双色球算法示例
2017/06/20 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
深入浅析vue中cross-env的使用
2019/09/12 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
python求素数示例分享
2014/02/16 Python
python读写ini文件示例(python读写文件)
2014/03/25 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python人人网登录应用实例
2014/09/26 Python
python Django批量导入数据
2016/03/25 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python将视频转换为全字符视频
2019/04/26 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
庆中秋节主题活动方案
2014/02/03 职场文书
《开国大典》教学反思
2016/02/16 职场文书
《灰雀》教学反思
2016/02/19 职场文书
初中政治教师教学反思
2016/02/23 职场文书
Python天气语音播报小助手
2021/09/25 Python
zabbix配置nginx监控的实现
2022/05/25 Servers