Angle2 및 공유 모듈 적용

이번에는 Angular2와 공유모듈 적용에 대해 소개해 드리겠습니다. Angular2와 공유모듈 적용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

모듈을 생성하려면 공유 모듈인 PostSharedModule이 사용됩니다. 공유 모듈에는 기사 관리 모듈과 댓글 관리 모듈이라는 두 가지 공통 모듈이 포함되어 있습니다.

1 모듈 라우팅 testmodule을 생성합니다. .routes.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 { }

3. ng c test-main 실행, test-main 구성요소 생성, test-main.comComponent.html

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' } 
    ] 
  } 
];

공유 모듈 생성 post.module.ts

<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>

다음 내용을 읽어보셨을 것입니다. 이 기사의 사례 당신은 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Angular 라우팅 실제 사례 적용

Angular는 HMR 코드 분석을 사용합니다

위 내용은 Angle2 및 공유 모듈 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!