Explication détaillée des modules angulaires2 et des modules partagés-js tutoriel-php.cn

Explication détaillée des modules angulaires2 et des modules partagés

亚连

Libérer： 2018-05-26 13:55:55

original

1366 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée du module angulaire2 et du module partagé. Maintenant, je le partage avec vous et le donne comme référence.

Pour créer un module, le module partagé PostSharedModule est utilisé. Le module partagé contient deux modules communs : le module de gestion des articles et le module de gestion des commentaires

1, créez un module 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 { }

Copier après la connexion

2. Créer un itinéraire de module 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; } 
    ] 
  } 
];

Copier après la connexion

3. Exécutez ng g c test-main, créez le composant test-main, modifiez 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>

Copier après la connexion

Créer le partage 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 { 
  
}

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir. .