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 { 

}

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

您可能感兴趣的文章:

  • 浅谈Angular2 模块懒加载的方法
  • Angular2入门教程之模块和组件详解
  • 浅析Angular2子模块以及异步加载
  • Angular2-primeNG文件上传模块FileUpload使用详解
  • Angular2 PrimeNG分页模块学习
  • Angular2学习笔记——详解NgModule模块
  • Angular2 NgModule 模块详解
赞 (0)

相关推荐

  • 浅谈Angular2 模块懒加载的方法

    浅谈Angular2 模块懒加载的方法

    当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了.所以,很有必要根据业务将不同的功能分模块,以便Angular2按需加载,提升用户体验. 下面的例子是将首页放到home模块里,访问/home时加载home模块内容,仅供学习懒加载,其实首页访问路径应该是/ 先看项目文件结构: home模块放到src/app/home目录下,里面的home目录是home组件. home模块有单独的定义和路由(home.module.ts,home-ro

  • Angular2学习笔记——详解NgModule模块

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们. 模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule.HttpModule.RouterModule. NgModule的

  • Angular2 NgModule 模块详解

    Angular2 NgModule 模块详解

    Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Directives.Pipes,引入Service,并控制外部组件对内部成员的访问权限. angular2 具有了模块的概念,响应了后台程序的号召,高内聚 低耦合.模块就是用来进行封装,进行高内聚  低耦合的功能. 其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须

  • 浅析Angular2子模块以及异步加载

    浅析Angular2子模块以及异步加载

    用Angular2开发一个大型的应用,我们通常都需要分模块进行开发.例如将某一个功能的相关页面和功能放在一个模块里面,这样既可以实现系统的松耦合,给开发和后期的维护带来很大的便利.同时,对于子模块,我们还可以使用延时加载,这样可以减少初始加载的文件的大小.在这篇文章中,我们就来看看在Angular2框架下怎么实现子模块及其延时加载. 可以在这里查看本文使用的实例.该实例基于上篇文章Angular2使用Guard和Resolve进行验证和权限控制 所用的实例,并在它基础上添加了一个lazy的模块,

  • Angular2入门教程之模块和组件详解

    Angular2入门教程之模块和组件详解

    本文呢主要给大家介绍的关于Angular2模块和组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.初步了解模块和组件 之前给大家介绍了构建工程,这篇文章简单讲述一下Angular2中的模块和组件. app文件夹下有五个文件,其中,app.component.spec.ts应该是和模块测试有关的文件,目前不用管它.剩下的四个文件就是典型的模块+组件的文件组成模式. Angular2应用由模块和组件构成,每个模块这样明明name.module.ts,组件则是name.compo

  • Angular2 PrimeNG分页模块学习

    Angular2 PrimeNG源码学习 Paginator分页组件 GITHUB地址 首先分析一下分页功能的需求: 由父组件传入数据总数量,每页显示数量,可自定义初始页 由父组件传入分页按钮个数 有第一页,上一页,下一页,最后一页按钮 可在页面选择性更改每页显示数量 HTML模板代码: 部分代码片段 第一页按钮: 复制代码 代码如下: <a href="#" #firstlink class="ui-paginator-first ui-paginator-eleme

  • Angular2-primeNG文件上传模块FileUpload使用详解

    近期在学习使用Angular2做小项目,期间用到很多primeNG的模块. 本系列将结合实战总结angular2-primeNG各个模块的使用经验. 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 本例中为: admin.module.ts import {FileUploadModule} from 'primeng/primeng'; @NgModule({ imports: [FileUploadModule] }) 在需要使用上传功能的组件的HT

  • python中模块的__all__属性详解

    python模块中的__all__属性,可用于模块导入时限制,如: from module import * 此时被导入模块若定义了__all__属性,则只有__all__内指定的属性.方法.类可被导入. 若没定义,则导入模块内的所有公有属性,方法和类 # kk.py class A(): def __init__(self,name,age): self.name=name self.age=age class B(): def __init__(self,name,id): self.nam

  • 关于pip的安装,更新,卸载模块以及使用方法(详解)

    在Python的学习过程中,肯定会遇到很多安装模块的地方,可以使用easy_install安装,但是easy_install相对于pip而言,最大的缺陷就是它所安装的模块是不能够卸载的,其他功能是和pip一样的. 下面介绍一下pip的安装: 安装我总结了两个方法 1 通过下载安装文件来安装 2 通过easy_install安装 1 下载pip安装包 https://pypi.python.org/pypi/pip#downloads 1) 网页提供了两个安装包,一个是.whl的 一个是压缩包的,

  • python模块之re正则表达式详解

    python模块之re正则表达式详解

    一.简单介绍 正则表达式是一种小型的.高度专业化的编程语言,并不是python中特有的,是许多编程语言中基础而又重要的一部分.在python中,主要通过re模块来实现. 正则表达式模式被编译成一系列的字节码,然后由用c编写的匹配引擎执行.那么正则表达式通常有哪些使用场景呢? 比如为想要匹配的相应字符串集指定规则: 该字符串集可以是包含e-mail地址.Internet地址.电话号码,或是根据需求自定义的一些字符串集: 当然也可以去判断一个字符串集是否符合我们定义的匹配规则: 找到字符串中匹配该规

  • Python使用base64模块进行二进制数据编码详解

    前言 昨天团队的学妹来问关于POP3协议的问题,所以今天稍稍研究了下POP3协议的格式和Python里面的poplib.而POP服务器往回传的数据里有一部分需要用到Base64进行解码,所以就顺便看了下Python里面的base64模块. 本篇先讲一下base64模块,该模块提供了关于Base16,Base32,Base64,Base85和Ascii85的编码和解码相关的函数.有关poplib模块的内容,会在后面发上来.嗯,又挖了一个坑,这辈子挖的坑填不完了... 以下内容摘自http://bb

  • Python用sndhdr模块识别音频格式详解

    本文主要介绍了Python编程中,用sndhdr模块识别音频格式的相关内容,具体如下. sndhdr模块 功能描述:sndhdr模块提供检测音频类型的接口. 唯一一个API sndhdr模块提供了sndhdr.what(filename)和sndhdr.whathdr(filename)两个函数.但实际上它们的功能是一样的.(不知道多写一个的意义何在,what函数在内部调用了whathdr函数并把数据完完整整地返回) 在之前的版本,whathdr函数返回元组类型的数据,在Python3.5版本之

  • Python模块搜索路径代码详解

    简述 由于某些原因,在使用 import 时,Python 找不到相应的模块.这时,解释器就会发牢骚 - ImportError. 那么,Python 如何知道在哪里搜索模块的路径呢? 模块搜索路径 当导入名为 hello 的模块时,解释器首先搜索具有该名称的内置模块.如果没有找到,将在变量 sys.path 给出的目录列表中搜索名为 hello.py 的文件. sys.path 从这些位置初始化: 包含输入脚本的目录(或当前目录,当没有指定文件时) PYTHONPATH(目录名列表,与 she

  • NodeJs 文件系统操作模块fs使用方法详解

    NodeJs:文件读取API使用方法 - - readFile() 需求:使用Node中提供的文件操作API,读取files目录下的1.txt 文档中文本内容. Node的三个组成部分:ECMAScript核心 + 全局成员 + 核心API成员 核心API成员,在大家安装Node应用程序的时候,就已经安装到了自己的电脑中. 如果想要访问核心成员,直接使用require("核心成员的名称"),就能够导入并使用这些核心成员. const fs = require("fs"

  • vue中node_modules中第三方模块的修改使用详解

    最近用vue在做一个项目,github用上找了一个日历插件,intall到了本项目中,配好以后发现插件的样式风格和项目总体风格相差较大,所以就像这个改一下插件风格, 第一种方法:我直接在父组件中将style标签的scoped的属性去掉了,在父组件中直接写了想要的样式,重叠样式全部!important,结果确实生效了 第二种方法:本想这个要是样式这么改,还有路可走:要是插件的底层方法呢,如果有对外开发的修改入口还行,要是没有,可咋办,于是想着能不能直接去改下这个插件,这样直接一锤子到底, 在nod

  • Python 常用模块 re 使用方法详解

    一.re模块的查找方法: 1.findall   匹配所有每一项都是列表中的一个元素 import re ret = re.findall('\d+','asd鲁班七号21313') # 正则表达式,待匹配的字符串,flag # ret = re.findall('\d','asd鲁班七号21313') # 正则表达式,待匹配的字符串,flag # print(ret) 2.search 只匹配从左到右的第一个,等到的不是直接的结果,而是一个变量,通过这个变量的group方法来获取结果 impo

  • python3 enum模块的应用实例详解

    一.枚举与字典类型 字典类型的缺点: 1.值可变 2.没有防止相同标签的功能 枚举的特点: 1.枚举类的值不可以被外界更改 2.不能存在相同的标签,但允许不同标签存在相同的枚举值,即后者相当于前者的别名 3.枚举值可以是任意类型 4.枚举标签尽量用大写 from enum import Enum #普通类 class dict(): green = 1 green = 2 red = 3 dict.red = 4 print(dict.red) >>> 4 class VIP(Enum)

随机推荐