Home  >  Article  >  Web Front-end  >  Detailed explanation of angular2 modules and shared modules

Detailed explanation of angular2 modules and shared modules

亚连
亚连Original
2018-05-26 13:55:551387browse

This article mainly introduces the detailed explanation of angular2 module and shared module. Now I will share it with you and give you a reference.

To create the module, the shared module PostSharedModule is used. The shared module contains two common modules: article management module and comment management module

1, create a module 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 &#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. Create module routing 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. Execute ng g c test-main, create component test-main, modify 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>

Create shared module 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 { 
  
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax cross-domain (same basic domain name) form submission method

AJAX submission form data example Analysis

A brief discussion on Ajax and its advantages and disadvantages

# #

The above is the detailed content of Detailed explanation of angular2 modules and shared modules. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn