Detaillierte Erläuterung der Angular2-Module und gemeinsam genutzten Module

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Angular2-Moduls und des gemeinsam genutzten Moduls vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Um ein Modul zu erstellen, 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 &#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. 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 ng 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>

, um das gemeinsame Modul post.module zu erstellen. 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 { 
  
}

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Ajax-domänenübergreifende Methode (gleicher Basisdomänenname) zur Formularübermittlung

AJAX-Formulardaten Analyse eines Einreichungsbeispiels

Eine kurze Diskussion über Ajax und seine Vor- und Nachteile

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Angular2-Module und gemeinsam genutzten Module. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!