首頁 > 文章 > web前端 > angular2模組和共享模組詳解

angular2模組和共享模組詳解

亚连原創: 2018-05-26 13:55:551329瀏覽

這篇文章主要介紹了angular2模組和共享模組詳解,現在分享給大家，也給大家做個參考。

建立模組，用到了共享模組PostSharedModule，共享模組裡麵包含了2個公用的模組：文章管理模組和評論管理模組

1,建立一個模組testmodule.module.ts

import { CommonModule } from &#39;@angular/common&#39;; 
import { NgModule } from &#39;@angular/core&#39;; 
import { RouterModule } from "@angular/router"; 
import { <span style="color:#cc0000;"><strong>PostSharedModule </strong></span>} from &#39;../shared/post.module&#39;; 
import { testModule } from &#39;./testmodule.routes&#39;; 
import { TestMainComponent } from &#39;./test-main/test-main.component&#39;; 
import { PostTableService } from &#39;../manage/post-table/services/post-table.service&#39;; 
@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 &#39;./test-main/test-main.component&#39;; 
import { PostTableComponent } from &#39;../manage/post-table/post-table.component&#39;; 
import { CommentTableComponent } from &#39;../manage/comment-table/comment-table.component&#39;; 
export const testModule = [ 
  { 
    path:&#39;&#39;, 
    component:TestMainComponent, 
    children: [ 
      { path: &#39;&#39;,redirectTo:&#39;posttable/page/1&#39;,pathMatch:&#39;full&#39;}, 
      { path: &#39;posttable/page/:page&#39;, component: PostTableComponent }, 
      { path: &#39;commenttable/page/:page&#39;, component: CommentTableComponent }, 
      { path: &#39;**&#39;, redirectTo:&#39;posttable/page/1&#39; } 
    ] 
  } 
];

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 &#39;@angular/core&#39;; 
import { ModalModule } from &#39;ng2-bootstrap&#39;; 
import { PaginationModule } from &#39;ng2-bootstrap&#39;; 
import { SharedModule } from &#39;./shared.module&#39;; 
import { CommentTableComponent } from &#39;../manage/comment-table/comment-table.component&#39;; 
import { PostTableComponent } from &#39;../manage/post-table/post-table.component&#39;; 
@NgModule({ 
 imports:[  
  SharedModule, 
  ModalModule.forRoot(), 
  PaginationModule.forRoot() 
 ], 
 declarations:[  
  CommentTableComponent,  
  PostTableComponent 
 ], 
 exports:[  
  ModalModule, 
  PaginationModule, 
  CommentTableComponent,  
  PostTableComponent 
 ] 
}) 
export class PostSharedModule { 
  
}

上面是我整理給大家的，希望今後會對大家有幫助。

ajax跨域(基礎網域相同)表單提交的方法

AJAX提交表單資料實例分析

淺談Ajax相關及其優缺點

######################## #

以上是angular2模組和共享模組詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用js取得ModelAndView值下一篇：如何使用js取得ModelAndView值

看更多