Wenden Sie Angular2 und gemeinsam genutzte Module an

Dieses Mal werde ich Ihnen die Anwendung von Angular2 und gemeinsam genutzten Modulen vorstellen. Was sind die Vorsichtsmaßnahmen für die Anwendung von Angular2 und gemeinsam genutzten Modulen? Das Folgende ist ein praktischer Fall.

Zum Erstellen des Moduls wird das gemeinsam genutzte Modul PostSharedModule verwendet. Das gemeinsam genutzte Modul enthält zwei gemeinsame Module: Artikelverwaltungsmodul und Kommentarverwaltungsmodul

1, erstellen Sie ein Modul 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 '../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, 
   <span style="color:#ff0000;">PostSharedModule</span>, 
   RouterModule.forChild(testModule) 
 ], 
 exports:[ 
  TestMainComponent 
 ], 
 providers: [ 
  PostTableService 
 ] 
}) 
export class TestModule { }

2. Erstellen Sie die Modulroute 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. Führen Sie g c test-main aus, erstellen Sie die Komponente test-main, ändern Sie 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>

Erstellen Sie ein gemeinsames Modul 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 { 
  
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Angular Routing praktische Fallanwendung

Angular verwendet HMR-Codeanalyse

Das obige ist der detaillierte Inhalt vonWenden Sie Angular2 und gemeinsam genutzte Module an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!