Detaillierte Erläuterung der Angular2-Module und gemeinsam genutzten Module-js-Tutorial-php.cn

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

亚连

Freigeben： 2018-05-26 13:55:55

Original

1328 Leute haben es durchsucht

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 &#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 { }

Nach dem Login kopieren

2. Erstellen Sie die Modulroute 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; } 
    ] 
  } 
];

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!