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的内置过滤器和自定义过滤器【推荐】

    详解Angular的内置过滤器和自定义过滤器【推荐】

    在实际的开发过程中,很多后端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理。本文将对Angular的内置过滤器和自定义过滤器进行详细介绍,下面跟着小编一起来看下吧
    2016-12-12
  • AngularJS ng-change 指令的详解及简单实例

    AngularJS ng-change 指令的详解及简单实例

    本文主要介绍AngularJS ng-change 指令,这里对ng-change指令资料做了详细介绍,并提供源码和运行结果,有需要的小伙伴参考下
    2016-07-07
  • 浅谈ng-zorro使用心得

    浅谈ng-zorro使用心得

    这篇文章主要介绍了浅谈ng-zorro使用心得,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Angular 4.X开发实践中的踩坑小结

    Angular 4.X开发实践中的踩坑小结

    这篇文章主要给大家介绍了关于Angular 4.X开发实践中的一些踩坑经验,文中主要介绍的是使用ngIf或者ngSwitch出错以及多级依赖注入器的相关内容,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • 深入浅析AngularJS中的module(模块)

    深入浅析AngularJS中的module(模块)

    我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ,感兴趣的朋友一起学习吧
    2016-01-01
  • Angular在模板驱动表单中自定义校验器的方法

    Angular在模板驱动表单中自定义校验器的方法

    本章介绍的是如何对模板驱动表单创建自定义校验器,它相比较响应式表单自定义校验器略为复杂一些。接下来通过本文给大家分享Angular在模板驱动表单中自定义校验器的方法,感兴趣的朋友一起看看吧
    2017-08-08
  • Angular依赖注入optional constructor parameters概念

    Angular依赖注入optional constructor parameters概念

    这篇文章主要为大家介绍了Angular 依赖注入领域里 optional constructor parameters 的概念及使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • 详解在AngularJS的controller外部直接获取$scope

    详解在AngularJS的controller外部直接获取$scope

    本篇文章主要介绍了详解在AngularJS的controller外部直接获取$scope ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Angular企业级开发——MVC之控制器详解

    Angular企业级开发——MVC之控制器详解

    本篇文章主要介绍了Angular企业级开发——MVC之控制器详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • AngularJs Managing Service Dependencies详解

    AngularJs Managing Service Dependencies详解

    本站主要介绍AngularJs Managing Service Dependencies的知识资料,这里整理相关知识,及简单示例代码,有兴趣的小伙伴可以参考下
    2016-09-09

最新评论