使用angular2模块和共享模块的详细介绍

这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。

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 {   }

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

PHP的迭代器接口Iterator如何使用

PHP的SESSION反序列化使用详解

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

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

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

(0)
上一篇 2025年3月8日 13:59:05
下一篇 2025年3月7日 09:59:32

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

相关推荐

  • 怎样开发最优的JS模块

    这次给大家带来怎样开发最优的JS模块,开发最优JS模块的注意事项有哪些,下面就是实战案例,一起来看一下。 不少人都曾经在 npm 上发布过自己开发的 JavaScript 模块,而在使用一些模块的过程中,我经常产生“这个模块很有用,但如果能…

    编程技术 2025年3月8日
    200
  • 在Angular2里去除url中#号的操作详解

    这次给大家带来在Angular2里去除url中#号的操作详解,在Angular2里去除url中#号的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 本文中主要介绍了关于Angular2+中去除url中#号的相关内容,这是最近在工作中…

    编程技术 2025年3月8日
    200
  • Angular预加载延迟模块怎么使用

    这次给大家带来Angular预加载延迟模块怎么使用,Angular预加载延迟模块使用的注意事项有哪些,下面就是实战案例,一起来看一下。 在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这…

    编程技术 2025年3月8日
    200
  • Angular2开发组件步奏详解

    这次给大家带来angular2开发组件步奏详解,angular2开发组件的注意事项有哪些,下面就是实战案例,一起来看一下。 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色――指令,分为属性型、标签型、css类型和注释…

    编程技术 2025年3月8日
    200
  • 使用Angular2时避免Dom误区

    这次给大家带来使用Angular2时避免Dom误区,使用Angular2时避免Dom误区的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 Angular2的设计目标本来就是要让浏览器和DOM独立。DOM是复杂的,因此使组件与它分离,…

    编程技术 2025年3月8日
    200
  • angular2模块与共享模块使用方法

    这次给大家带来angular2模块与共享模块使用方法,angular2模块与共享模块使用的注意事项有哪些,下面就是实战案例,一起来看一下。 1,创建一个模块testmodule.module.ts import { CommonModule…

    编程技术 2025年3月8日
    200
  • Angular2中如何使用Dom

    这次给大家带来Angular2中如何使用Dom,Angular2中使用Dom的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 Angular2的设计目标本来就是要让浏览器和DOM独立。DOM是复杂的,因此使组件与它分离,会让我们的应…

    编程技术 2025年3月8日
    200
  • npm 安装删除模块步骤详解

    这次给大家带来npm 安装删除模块步骤详解,npm 安装删除模块的注意事项有哪些,下面就是实战案例,一起来看一下。 npm安装模块 【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录; 【npm instal…

    编程技术 2025年3月8日
    200
  • 非常实用的ajax用户注册模块

    这篇文章主要为大家详细介绍了非常实用的ajax用户注册模块,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在网站设计中,ajax技术的使用已经很普遍了,尤其在交互式的网站中,ajax技术更不可缺少了,几乎在所有的交互式网站应用中,都会看…

    2025年3月8日
    200
  • angular2模块和共享模块详解

    这篇文章主要介绍了angular2模块和共享模块详解,现在分享给大家,也给大家做个参考。 创建模块,用到了共享模块PostSharedModule,共享模块里面包含了2个公用的模块:文章管理模块和评论管理模块 1,创建一个模块testmod…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论