RouterModule.for 루트(ROUTES) vs RouterModule.어린이용(ROUTS)
이 두 가지의 차이점은 무엇이며 각각의 사용 사례는 무엇입니까?
문서가 정확하게 도움이 되는 것은 아닙니다.
forRoot는 모든 지시어, 지정된 경로 및 라우터 서비스 자체를 포함하는 모듈을 만듭니다.
forChild는 모든 지시어와 지정된 경로를 포함하지만 라우터 서비스는 포함하지 않는 모듈을 만듭니다.
제 막연한 추측으로는 하나는 '메인' 모듈을 위한 것이고 다른 하나는 수입된 모듈을 위한 것입니다(메인 모듈에서 이미 서비스를 사용할 수 있기 때문에). 하지만 사용 사례가 생각나지 않습니다.
저는 이 기사를 읽는 것을 강력히 추천합니다.
공급자가 있는 모듈
모듈을 가져올 때 일반적으로 모듈 클래스에 대한 참조를 사용합니다.
@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
##라우터 모듈과 어떤 관련이 있습니까?둘 다 동일한 토큰을 사용하여 액세스한다고 가정합니다.
export const moduleWithProvidersForRoot = {
ngModule: A,
providers: [{provide: token, useClass: AService}]
};
export const moduleWithProvidersForChild = {
ngModule: A,
providers: [{provide: token, useClass: BService}]
};
를 요청할 때 으로.token게으르게 로드된 모듈에서 얻을 수 있습니다.BService계획대로
은 " " 를 사용합니다.ROUTES모듈과 관련된 모든 경로를 가져오는 토큰입니다.Lazy Loaded 모듈 관련 경로를 이 모듈 내에서 사용할 수 있기를 원하기 때문에(B 서비스와 유사함) Lazy Loaded Child Module에 대해 다른 구성을 사용합니다.
static forChild(routes: Routes): ModuleWithProviders {
return {
ngModule: RouterModule,
providers: [{provide: ROUTES, multi: true, useValue: routes}]
};
}
정답은 맞는 것 같은데 뭔가 빠진 것 같아요.
빠진 것은 "왜 그리고 무엇을 해결하는가?"입니다.
자, 시작하겠습니다.
먼저 몇 가지 정보를 언급하겠습니다.
모든 모듈은 루트 서비스에 액세스할 수 있습니다.
게으른 도 라서로느모에듈서제서다있에서 할 수 .app.module.
로드가 느린 모듈이 앱 모듈이 이미 제공한 서비스를 자체적으로 제공하면 어떻게 됩니까? 두 가지 경우가 발생합니다.
그것은 문제가 되지 않지만 가끔은 문제가 됩니다.
어떻게 해결할 수 있을까요? 단순히 해당 공급자가 있는 모듈을 게으르게 로드된 모듈로 가져오지 마십시오.
이야기의 끝.
이 ^는 레이지 로드된 모듈이 레이지 로드되지 않은 모듈과 반대로 자체 분사 지점을 가지고 있다는 것을 보여주기 위한 것입니다.
그러나 공유(!) 모듈이 선언되면 어떻게 됩니까?providers그리고 그 모듈은 게으른 사람에 의해 수입되고 그리고. app.module다시 말씀드렸듯이, 두 가지 사례가 있습니다.
공유 모듈 POV에서 이 문제를 어떻게 해결할 수 있을까요?providers:[]왜죠? 왜냐하면 그것들은 게으른 것과 app.module을 소비하는 것 모두에 자동으로 가져올 것이고 우리는 그것들을 원하지 않기 때문입니다. 우리는 각각 다른 인스턴스를 가질 것을 보았기 때문입니다.
음, 우가할 수 .providers:[]하지만 여전히, 제공자들을 제공할 것입니다 (죄송합니다 :))
어떻게요? 이렇게요.
제공자가 없습니다.
그렇지만
이제 app.module이 POV 서비스를 사용하여 공유 모듈을 가져올 때 무슨 일이 발생합니까? 아무것도 발생하지 않습니다.
이제 게으른 모듈이 POV 서비스를 사용하여 공유 모듈을 가져올 때 어떤 일이 발생합니까? 아무것도 발생하지 않습니다.
컨벤션을 통해 수동 메커니즘 진입:
사진의 공급자는 다음과 같은 기능을 제공합니다.service1그리고.service2
이것은 우리가 수입할 수 있게 해줍니다.service2로드가 느린 모듈의 경우service1모듈이 아닌 모듈의 경우.(기침...기침...기침)
그나저나, 아무도 당신이 전화하는 것을 막지 않습니다.forRoot모듈 에서. 될 입니다. 하지만 당신은 2개의 인스턴스를 가질 것입니다. 왜냐하면app.module또한 수행해야 합니다. 따라서 게으른 모듈에서는 수행하지 마십시오.
- if 또 - 약app.module 출들forRoot(그리고 아무도 전화하지 않습니다.forchild - . 에는 )만 있을 입니다. - 괜습니다찮다니▁). 하지만 루트 인젝터는service1앱에서 )(사용 가능)
그럼 왜 우리는 그것이 필요할까요?제 생각엔:
공유 모듈을 통해 서로 다른 공급자를 분할하여 활성화된 모듈 및 유휴 모듈과 함께 사용할 수 있습니다.
forRoot그리고.forChild관습.반복합니다: 관례
바로 그겁니다.
잠깐!! 싱글톤에 대해 한마디도?그럼 왜 나는 모든 곳에서 싱글턴을 읽을까요?
음 - 위 문장에 숨겨져 있어요 ^
공유 모듈은 루트 및 하위를 통해 서로 다른 공급자를 분할하여 활성화된 모듈과 유휴 모듈과 함께 사용할 수 있습니다.
관례(!!)는 그것을 싱글톤으로 할 수 있도록 허용하고 있습니다. 또는 더 정확하게는 당신이 관례를 따르지 않는다면 당신은 싱글톤을 얻을 수 없을 것입니다.
그래서 당신이 로드만 한다면,forRoot에 시대에app.module그러면 당신은 오직 전화만 해야 하기 때문에 단 하나의 사례만 받습니다.forRoot은 있것는에에.app.module.
-이에서 BTW에 대해 수 .forChild은 호출하지 않습니다.forRoot싱글톤의 POV에서 안전합니다.
않는 . forChild에만 가 없습니다. 단지 루트를 호출할 필요가 없습니다. 분명히 로드될 것입니다.app.module게으른 모듈에 대한 기능을 제공하지 않고, 싱글톤이어야 하는 새로운 서비스를 만들지 않고, 자체 서비스를 보유합니다.
은 이컨벤션은당좋게능줍니다력은을신에라고 불리는 좋은 .forChild게으르게 로드된 모듈에 대한 서비스만 사용합니다.
다음은 루트 공급자가 양수를 산출하는 데모이고, 로드가 느린 모듈이 음수를 산출하는 데모입니다.
설명서에는 이러한 구별의 목적이 다음과 같이 명시되어 있습니다. https://angular.io/docs/ts/latest/guide/ngmodule.html#!#core-for-root
루트 응용 프로그램 모듈인 AppModule에서만 루트를 호출합니다.다른 모듈, 특히 로드가 느린 모듈에서 호출하는 것은 의도에 반하는 것이며 런타임 오류를 발생시킬 가능성이 높습니다.
다른 @NgModule 목록에 추가하지 말고 결과를 가져와야 합니다.
가 " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " "forRoot는 "자녀" 기능에 .forChild애플리케이션 시작 시 로드할 필요가 없는 서브모듈과 게으르게 로드된 모듈에 매우 유용하며, @HarryNin이 말했듯이 새로운 서비스를 등록하는 대신 RouterService를 재사용하라는 지시를 받아 런타임 오류가 발생할 수 있습니다.
그forRoot정적 방법:
RouterModule.forRoot(routes)
forRoot 정적 방법은 앱의 루트 라우팅 모듈을 구성하는 방법입니다.RouterModule.forRoot(routes)를 호출할 때 Angular에게 라우터 클래스의 인스턴스를 전체적으로 인스턴스화하도록 요청하는 것입니다.Angular가 모든 기능 모듈을 가져오기 위해 새 기본 AppModule을 생성하는 것과 마찬가지로 모든 하위 경로를 가져오기 위한 AppRouting Module도 제공합니다.
Angular CLI를 통해 생성한 새 앱에서 forRoot 메서드는 실제로 app-routing.module.ts 내부에서 이미 사용되고 있습니다.앱에서 forRoot 메서드를 한 번만 사용하려고 합니다.이 방법은 Angular에 후드 아래에 있는 Router 클래스의 인스턴스를 인스턴스화하도록 지시하고 앱에 라우터가 하나만 있을 수 있기 때문입니다.forRoot 정적 메서드는 싱글톤 클래스를 사용하도록 보장하는 패턴의 일부입니다.
하위 경로:
RouterModule.forChild(routes)
forChild 정적 메서드를 사용할 때는 기본적으로 Angular에 "앱에 이미 사용 가능한 라우터 인스턴스가 있으므로 해당 인스턴스에 모든 경로를 등록하십시오."라고 말합니다.forChild 메서드는 앱 전체에서 경로를 등록하기 위해 호출하는 메서드이며 사용자가 만든 라우팅 모듈인 자식 내부에서 사용합니다.
forChild 정적 메서드는 앱 내에서 문제를 분리할 수 있도록 하여 Angular 모듈 기능의 핵심 부분을 담당하기 때문에 유용합니다.
앱에서 사용자 설정을 위한 새 기능 모듈을 만들고자 하면 이 기능에 몇 가지 경로가 포함된다고 가정합니다.앱이 성장함에 따라 결국 유지할 수 없게 되는 이러한 경로를 앱 라우팅 모듈에 직접 추가하는 대신 forChild 방법을 사용하여 앱 내에서 문제를 분리할 수 있습니다.먼저 새 사용자 설정 라우팅 모듈을 만듭니다.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserSettingsComponent } from './user-settings.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
const routes: Routes = [
{
path: 'settings',
component: UserSettingsComponent,
children: [
{
path: 'profile',
component: UserProfileComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserSettingsRoutingModule { }
위의 forChild 메서드를 사용합니다.forRoot 메서드를 이미 사용했으므로 이미 인스턴스화된 앱 라우터에 경로를 등록하기만 하면 됩니다.
이제 다음과 같은 사용자 설정 모듈을 만들어야 합니다.
import { NgModule, CommonModule } from '@angular/core';
import { UserSettingsRoutingModule } from './user-settings-routing.module';
@NgModule({
imports: [
CommonModule,
UserSettingsRoutingModule
],
// Configure the rest of your module here
})
export class UserSettingsModule { }
그리고 여기 있습니다!이제 이 사용자 설정 모듈을 루트인 AppModule로 가져오기만 하면 각 구성 요소를 가리키는 자식 경로가 앱 내에서 구성됩니다.
이 가이드가 루트 및 차일드에 대한 Angular Router 정적 방법이 앱 내에서 잘 구성된 경로를 만드는 데 어떻게 도움이 되는지 이해하는 데 도움이 되었기를 바랍니다.자세한 내용은 설명서를 참조하십시오.
만약 appRoutes에 사이트의 다양한 기능(admin crud, user crud, book crud)에 대한 경로가 포함되어 있고 우리가 그것들을 분리하기를 원한다면 우리는 그것을 간단히 할 수 있습니다.
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},
]
이를 이해하기 위해 라우터 모듈을 구현한 것으로 간주합니다.레이지 로드된 경로와 공통 경로는 별도로 처리해야 하며 레이지 로드를 지원합니다.
@NgModule({
declarations: [
],
exports: [],
})
export class RouteModule {
static forRoot(): ModuleWithProviders<RouteModule> {
return { ngModule: RouteModule, providers: [routerHistoryService,handleCommonRoutesService] };
}
static forChild(): ModuleWithProviders<RouteModule> {
return {
ngModule: RouteModule, providers: [handleChildRouterService]
};
}
}
root ->의 경우 공급자(서비스)와 함께 routerModule을 추가하므로 공통 각도 라우팅에 필요한 모든 서비스(예: routerHistoryService)가 앱 모듈(루트 모듈)의 루트 인젝터에 주입됩니다.
forchild ->는 제공자(서비스)가 있는 routerModule을 추가하지만, 공통 서비스(ex routerHistoryService)가 루트 인젝터에 이미 추가되었기 때문에, 게으르게 로드된 모듈에서, 우리는 그것들을 사용할 수 있을 것이고, 만약 우리가 그것을 추가한다면, 두 개의 인스턴스를 만들 것입니다.특히 어린이 경로를 처리하는 데 필요한 서비스가 있을 수 있습니다.그래서 그런 경우에 우리는 아이들을 위해 전화를 걸 때, 그들에게 제공할 수 있습니다(예: handleChildRouterService)
라우터 모듈이 루트 및 자식에 대해 구현되지 않은 경우 아래 시나리오를 고려합니다.
루트 인젝터 라우터에서 HistoryService 이전 경로는 "홈/지연 모듈"입니다.
그러나 새로운 이력 서비스가 있는 게으른 모듈에서 이전 경로는 null입니다.
뒤로 버튼을 클릭할 때 돌아갈 데이터가 없습니다.그래서 routerModule은 애플리케이션 전체에서 라우터 모듈이 단일 인스턴스만 갖도록 하기 위해 이 패턴을 따라 구현했습니다.
언급URL : https://stackoverflow.com/questions/40498081/routermodule-forrootroutes-vs-routermodule-forchildroutes
'programing' 카테고리의 다른 글
| Cygwin에서 루트 사용자/sudo와 동등합니까? (0) | 2023.05.02 |
|---|---|
| 잘못된 Swift 지원 - 파일이 일치하지 않습니다. (0) | 2023.05.02 |
| '사용' 지시어는 C#에서 네임스페이스 내부에 있어야 합니까 아니면 외부에 있어야 합니까? (0) | 2023.05.02 |
| 여러 개의 키로 "구별"을 효율적으로 수행하는 방법은 무엇입니까? (0) | 2023.05.02 |
| 중첩된 딕트의 Python 데이터 클래스 (0) | 2023.05.02 |