수요가 증가함에 따라 프로젝트의 기능도 더욱 복잡해집니다. 현재는 프로젝트와 컴포넌트, 명령어, 파이프라인을 통합된 기능 블록으로 모듈화해야 하는데, 이는 Angular4에서 서브루트와 모듈의 게으른 로딩을 탐구하는 데 딱 맞는 방법입니다.
이전 개발에서는 루트 모듈에 간단한 라우팅 함수가 구현되었으며, 이는 다음 세 단계로 요약할 수 있습니다:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. shell 컴포넌트에 내비게이션 바를 추가하면, routerLink 명령어가 경로의 목적지를 가리키고, routerLinkActive가 선택한 라벨에 css 스타일을 추가합니다
3. 쉘 컴포넌트 템플릿에 라우터-아웃렛 명령을 추가하면 뷰가 표시됩니다
이제 이 기반 위에 서브루트와 모듈의 레이저 로딩을 구현하고 싶습니다.
RouterModule.forRoot() 및 RouterModule.forChild()
RouterModule 객체는 라우팅 정보를 구성하기 위해 forRoot()와 forChild() 두 가지 정적 메서드를 제공합니다.
RouterModule.forRoot() 메서드는 메인 모듈의 주요 라우팅 정보를 정의하는 데 사용되며, RouterModule.forChild()는 Router.forRoot() 메서드와 유사하지만 기능 모듈에만 적용할 수 있습니다.
즉, forRoot()는 루트 모듈에서, forChild()는 서브모듈에서 사용됩니다.
그의 아들 루루
예를 들어, /settings 페이지 아래에 /settings/profile과 /settings/password라는 두 개의 페이지가 있다고 가정해 봅시다. 각각 프로필 페이지와 비밀번호 변경 페이지를 나타냅니다. 별도의 기능 블록으로 설정하며, 이는 기능 모듈로 캡슐화할 수 있습니다. 독립적인 경로가 있으며, 프로필 및 비밀번호 페이지의 경로는 서브루트로 설정할 수 있습니다.
SettingsModule 모듈에서는 forChild() 메서드를 사용하는데, 이는 SettingsModule이 애플리케이션의 메인 모듈이 아니기 때문입니다.
또 다른 큰 차이점은 SettingsModule 모듈의 메인 경로를 빈 경로('')로 설정했다는 점입니다. 경로를 /settings로 설정하면 /settings/settings와 일치하기 때문입니다. 빈 경로를 지정함으로써 /settings 경로와 일치합니다.
게으른 로딩: loadChildren
설정 모듈의 라우팅 정보를 루트 모듈 AppModule에서 구성하세요:
여기서는 게으른 로딩 LoadChildren 속성을 사용합니다. SettingsModule을 AppModule에 가져오는 대신, loadChildren 속성은 loadChildren 속성이 설정한 경로에 따라 Angular 경로에 SettingsModule 모듈을 불러오도록 지시합니다. 이는 모듈의 게이지 로딩 기능의 구체적인 적용으로, 사용자가 /settings/** 경로에 접근할 때 해당 SettingsModule 모듈이 로드되어 애플리케이션 시작 시 로드된 자원 크기를 줄입니다.
loadChildren의 재산 가치는 세 부분으로 구성됩니다:
모듈을 가져오기 경로에 대한 상대 경로가 필요합니다
#分隔符
모듈 클래스 이름을 내보내세요
커먼모듈 모듈
기능 모듈에 CommonModule 모듈을 도입하고 싶다고 말했지만, 처음에는 기능 모듈에 도입하고 싶다는 사실을 몰랐고, 그 결과 라우팅 중에 페이지 오류가 보고되었습니다:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'ngClass'는 'div'의 알려진 속성이 아니기 때문에 결합할 수 없습니다.
'ngForOf'는 'p'의 알려진 속성이 아니기 때문에 결합할 수 없습니다.
속성 결합 ngForTOf 는 임베디드 템플릿에 대한 어떤 명령에서도 사용되지 않습니다. 부동산 이름이 올바르게 표기되었는지, 모든 지침이 "@NgModule.declarations"에 명시되어 있는지 확인하세요.
'ngIf'는 'div'의 알려진 속성이 아니기 때문에 결합할 수 없습니다.
......
오랫동안 확인해보니, 기능 모듈에서 CommonModule을 도입하지 않았기 때문이라는 것을 알게 되었고, 도입 후에는 이 오류들이 사라졌습니다.
CommonModule은 NgIf와 NgFor를 포함한 응용 분야에서 널리 사용되는 많은 명령어를 제공합니다. 더 정확히 말하면, NgIf와 같은 명령은 @angular/common에서 CommonModule 내에서 선언됩니다.
우리는 루트 모듈 AppModule에서 BrowserModule 모듈을 가져왔고, AppModule이 CommonModule을 불러와 다시 내보냈습니다. 결과적으로 BrowserModule을 가져오는 한 CommonModule에서 자동으로 명령어를 받게 됩니다.
BrowserModule을 가져오면, 모듈이 노출한 모든 컴포넌트, 지침, 파이프라인이 AppModule 내 모든 컴포넌트 템플릿에서 추가적인 번거로운 절차 없이 직접 사용할 수 있습니다. 하지만 BrowserModule을 다른 모듈로 가져오지 마세요. 기능 모듈과 게으른 로딩 모듈은 대신 CommonModule으로 가져오는 것이 좋습니다. 전체 애플리케이션 레벨 제공자를 초기화할 필요가 없습니다. BrowserModule을 게으른 로딩 모듈로 가져오면, Angular에서 오류가 발생합니다.
이것들은 제가 지난 이틀간 Angular 서브루트와 게으른 부하를 사용하면서 겪은 문제와 요약입니다.
|
게시됨 2019. 6. 13. 오후 1:13:10
|
|
|
|
