angular2模块和共享模块详解

 更新时间:2018年04月08日 08:38:54   作者:孟繁洋  
这篇文章主要介绍了angular2模块和共享模块详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

创建模块,用到了共享模块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 { 
  
} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Angular @Injectable注解的工作原理解析

    Angular @Injectable注解的工作原理解析

    这篇文章主要为大家介绍了Angular @Injectable注解的工作原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Angular2  NgModule 模块详解

    Angular2 NgModule 模块详解

    这篇文章主要介绍了Angular2 NgModule 模块详解的相关资料,并附简单实例,需要的朋友可以参考下
    2016-10-10
  • 将angular-ui的分页组件封装成指令的方法详解

    将angular-ui的分页组件封装成指令的方法详解

    这篇文章主要给大家介绍了将angular-ui的分页组件封装成指令的方法,文中介绍的非常详细,相信会对大家的学习或者工作觉有一定的参考价值,需要的朋友下面来一起看看吧。
    2017-05-05
  • AngularJs bootstrap详解及示例代码

    AngularJs bootstrap详解及示例代码

    本文主要讲解AngularJs bootstrap,这里整理了详细的资料及简单示例代码帮助大家学习或者参考,有需要的小伙伴看下
    2016-09-09
  • angular过滤器实现排序功能

    angular过滤器实现排序功能

    这篇文章主要为大家详细介绍了angular过滤器实现排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • AngularJS控制器controller正确的通信的方法

    AngularJS控制器controller正确的通信的方法

    AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为
    2016-01-01
  • AngularJS的内置过滤器详解

    AngularJS的内置过滤器详解

    在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter。
    2015-05-05
  • Angular4 组件通讯方法大全(推荐)

    Angular4 组件通讯方法大全(推荐)

    这篇文章主要介绍了Angular4 组件通讯方法大全(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • AngularJS通过$sce输出html的方法

    AngularJS通过$sce输出html的方法

    不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候,发现用AngularJs输出html的时候,浏览器并不解析这些html标签,这里我们需要其显示angular输出的html能被浏览器解析怎么办呢?不知道Angularjs如何实现这种功能的通过这篇文章来看看吧。
    2016-09-09
  • 详解AngularJS Filter(过滤器)用法

    详解AngularJS Filter(过滤器)用法

    这篇文章主要介绍了AngularJS的filter,中文名“过滤器”是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东,的相关资料,需要的朋友可以参考下
    2015-12-12

最新评论