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 相关文章推荐
js模拟点击事件实现代码
Nov 06 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
layui的面包屑或者表单不显示的解决方法
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
PHP4中session登录页面的应用
2008/07/25 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python 简单的绘图工具turtle使用详解
2017/06/21 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python处理session的方法整理
2019/08/29 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
实习单位接收函
2014/01/11 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
初三开学计划书
2014/04/27 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
安全隐患整改报告
2014/11/06 职场文书
摩登时代观后感
2015/06/03 职场文书
初中数学教学随笔
2015/08/15 职场文书