[angular] RouterModule.forRoot (ROUTES) 대 RouterModule.forChild (ROUTES)

이 기사를 읽는 것이 좋습니다.

• Angular의 모듈과의 일반적인 혼동 방지

공급자가있는 모듈

모듈을 가져올 때 일반적으로 모듈 클래스에 대한 참조를 사용합니다.

@NgModule({
    providers: [AService]
})
export class A {}

-----------------------------------

@NgModule({
    imports: [A]
})
export class B

이렇게하면 모듈에 등록 된 모든 공급자 A가 루트 인젝터에 추가되고 전체 애플리케이션에서 사용할 수 있습니다.

그러나 다음과 같은 공급자에 모듈을 등록하는 또 다른 방법이 있습니다.

@NgModule({
    providers: [AService]
})
class A {}

export const moduleWithProviders = {
    ngModule: A,
    providers: [AService]
};

----------------------

@NgModule({
    imports: [moduleWithProviders]
})
export class B

이것은 이전 것과 동일한 의미를 갖습니다.

지연로드 된 모듈에는 자체 인젝터가 있다는 것을 알고있을 것입니다. 따라서 AService전체 응용 프로그램에서 사용할 수 있도록 등록 하고 일부 BService는 지연로드 된 모듈에서만 사용할 수 있도록 등록하려고한다고 가정합니다 . 다음과 같이 모듈을 리팩터링 할 수 있습니다.

@NgModule({
    providers: [AService]
})
class A {}

export const moduleWithProvidersForRoot = {
    ngModule: A,
    providers: [AService]
};

export const moduleWithProvidersForChild = {
    ngModule: A,
    providers: [BService]
};

------------------------------------------

@NgModule({
    imports: [moduleWithProvidersForRoot]
})
export class B

// lazy loaded module
@NgModule({
    imports: [moduleWithProvidersForChild]
})
export class C

이제는 BService하위 지연로드 모듈에서만 사용할 수 AService있으며 전체 애플리케이션에서 사용할 수 있습니다.

위의 내용을 다음과 같이 내 보낸 모듈로 다시 작성할 수 있습니다.

@NgModule({
    providers: [AService]
})
class A {
    forRoot() {
        return {
            ngModule: A,
            providers: [AService]
        }
    }

    forChild() {
        return {
            ngModule: A,
            providers: [BService]
        }
    }
}

--------------------------------------

@NgModule({
    imports: [A.forRoot()]
})
export class B

// lazy loaded module
@NgModule({
    imports: [A.forChild()]
})
export class C

RouterModule과 어떤 관련이 있습니까?

둘 다 동일한 토큰을 사용하여 액세스한다고 가정합니다.

export const moduleWithProvidersForRoot = {
    ngModule: A,
    providers: [{provide: token, useClass: AService}]
};

export const moduleWithProvidersForChild = {
    ngModule: A,
    providers: [{provide: token, useClass: BService}]
};

token지연로드 된 모듈에서 요청할 때 별도의 구성을 사용하면 BService계획대로 얻을 수 있습니다.

RouterModule은 ROUTES토큰을 사용 하여 모듈에 특정한 모든 경로를 가져옵니다. 지연로드 된 모듈에 특정한 경로를이 모듈 (BService에 대한 아날로그) 내에서 사용할 수 있기를 원하기 때문에 지연로드 된 하위 모듈에 대해 다른 구성을 사용합니다.

static forChild(routes: Routes): ModuleWithProviders {
    return {
        ngModule: RouterModule,
        providers: [{provide: ROUTES, multi: true, useValue: routes}]
    };
}

답변

 imports: [
    BrowserModule, HttpModule,
    AppRoutingModule,
    RouterModule.forRoot(categoriesRoutes),
    RouterModule.forRoot(auteursRoutes),
  ],

const auteursRoutes:Routes=[
  {path:'auteurs/ajouter',component:CreerAuteurComponent},
]
const categoriesRoutes: Routes = [


  {path:'categories/consulter',component:ConsultercategoriesComponent},
  {path:'categories/getsouscategoriesbyid/:id',component:GetsouscategoriesbyIDComponent},
  {path:'categories/ajout',component:CreerCategorieComponent},
 {path:'categories/:id',component:ModifiercategorieComponent},
 {path:'souscategories/ajout/:id',component:AjoutersouscategorieComponent},
 {path:'souscategories/lecture/:id1',component:SouscategoriesComponent},
 {path:'souscategories/modifier/:id1',component:ModifiersupprimersouscategorieComponent},
  {path:'uploadfile',component:UploadfileComponent},
  {path:'categories',component:ConsultercategoriesComponent},



]