Comment utiliser les modules angulaires2 avec des modules partagés-js tutoriel-php.cn

Comment utiliser les modules angulaires2 avec des modules partagés

php中世界最好的语言

Libérer： 2018-05-26 14:50:09

original

1221 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser les modules angulaires2 et les modules partagés, et quelles sont les précautions d'utilisation des modules angulaires2 et des modules partagés. Ce qui suit est un cas pratique, jetons un coup d'oeil.

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 '@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 { }

Copier après la connexion

2. Créez le module routestestmodule.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' } 
    ] 
  } 
];

Copier après la connexion

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour en savoir plus. contenu passionnant, veuillez prêter attention à php chinois Autres articles connexes en ligne !

Lecture recommandée :

Comment utiliser les actifs et les fichiers de ressources statiques de vue2.0

Utiliser React Router v4 à partir de zéro

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!