angular2模块和共享模块详解

这篇文章主要介绍了angular2模块和共享模块详解,现在分享给大家,也给大家做个参考。

创建模块,用到了共享模块PostSharedModule,共享模块里面包含了2个公用的模块:文章管理模块和评论管理模块

1,创建一个模块testmodule.module.ts

import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from "@angular/router"; import { PostSharedModule } 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,    PostSharedModule,    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

10000文章管理     1000000评论管理

登录后复制

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

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

ajax跨域(基础域名相同)表单提交的方法

AJAX提交表单数据实例分析

浅谈Ajax相关及其优缺点

以上就是angular2模块和共享模块详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2756384.html

(0)
上一篇 2025年3月8日 07:38:02
下一篇 2025年3月8日 07:38:11

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何使用angular2模块与共享模块

    这次给大家带来如何使用angular2模块与共享模块,使用angular2模块与共享模块的注意事项有哪些,下面就是实战案例,一起来看一下。 创建模块,用到了共享模块PostSharedModule,共享模块里面包含了2个公用的模块:文章管理…

    编程技术 2025年3月8日
    200
  • 微信小程序wx:for和wx:for-item的用法详解

    这篇文章主要介绍了微信小程序wx:for和wx:for-item的正确用法,wx:for是循环数组,wx:for-item即给列表赋别名,文中给大家列出来几个错误用法,大家一起学习下 wx:for=”{{list}}&#8221…

    编程技术 2025年3月8日
    200
  • vue 指定组件缓存实例详解

    keep-alive 是 vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。这篇文章主要介绍了vue 指定组件缓存,需要的朋友可以参考下 keep-alive 简介 keep-alive 是 Vue 内置的一个组件,可以使…

    编程技术 2025年3月8日
    200
  • Vue.js实现表格增删步奏详解

    这次给大家带来Vue.js实现表格增删步奏详解,Vue.js实现表格增删的注意事项有哪些,下面就是实战案例,一起来看一下。 具体代码如下: Vue.js小demo label{float:left;line-height: 34px;} .…

    2025年3月8日
    200
  • vue-cli安装使用步奏详解

    这次给大家带来vue-cli安装使用步奏详解,vue-cli安装使用的注意事项有哪些,下面就是实战案例,一起来看一下。 安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入…

    编程技术 2025年3月8日
    200
  • vue文件树组件使用详解

    这篇文章主要为大家详细介绍了vue文件树组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了vue文件树组件的实现方法,供大家参考,具体内容如下 本文主要是分析vue官方仓库里的文件树组件[vue gith…

    编程技术 2025年3月8日
    200
  • js类型判断使用详解

    这次给大家带来js类型判断使用详解,js类型判断使用的注意事项有哪些,下面就是实战案例,一起来看一下。 js类型转换中typeof会将null也识别为object, 而且返回的类型比少,我们用Object.prototype.toStrin…

    编程技术 2025年3月8日
    200
  • vue组件jsx语法使用步奏详解

    这次给大家带来vue组件jsx语法使用步奏详解,vue组件jsx语法使用的注意事项有哪些,下面就是实战案例,一起来看一下。 配置 需要用到babel插件 安装 npm install babel-plugin-syntax-jsx babe…

    编程技术 2025年3月8日
    200
  • 使用vue-admin-template优化步骤详解

    这次给大家带来使用vue-admin-template优化步骤详解,使用vue-admin-template优化的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 公司有好几个项目都有后台管理系统,为了方便开发,所以选择了 vue 中…

    2025年3月8日 编程技术
    200
  • vuex入门教学步奏详解

    这次给大家带来vuex入门教学步奏详解,vuex入门的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论