在Angular 2中使用路由延迟加载模块
问题描述:
在我的应用程序中,我有主模块及其路由器和子模块及其路由器。在Angular 2中使用路由延迟加载模块
主要模块(及其路由器)有一个像几个路径:
/login
/sign-up
/ask
etc
子模块有很多的路径:
/countries/edit
/countries/:id
/countries/
/coutries/search
etc
我想要做的子模块的惰性加载。
我现在这样做:
主路由器:
export const routes: Routes = [
{
path: "login", // to sign in or to see information about current logged user
loadChildren: "app/login/login.module"
},
{
path: "sign-up", // to sing up new users
loadChildren: "app/signup/sign-up.module"
},
{
path: "home", // to see home page
loadChildren: "app/home/home.module"
},
{ // directory to see, edit, search countries
path: "countries",
loadChildren: "app/country/country.module"
}
子模块的路由器:
{ // to see list of countries, press like and delete a country
path: "",
component: CountryViewAllComponent
},
{
// CR[done] try to avoid inline comments.
path: "search",
component: CountrySearchComponent
},
{
path: "edit",
component: CountryChangeComponent,
},
{
path: ":id",
component: CountryDetailComponent
}
,如果我的主网页上输入我的应用程序完美的作品/和navagate后通过页面点击链接。 但是,如果我重新加载页面例如/国家/搜索它将我移动到国家页面,并给出例外:“不能匹配任何路线:'搜索'”
答
您缺少pathMatch:完整并检查如何使用RouterModule。 forChild(路由)或forRoot ..为了更好的参考看到这个文档:
Lazy loading module (Angular 2 training book)
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { EagerComponent } from './eager.component';
const routes: Routes = [
{ path: '', redirectTo: 'eager', pathMatch: 'full' },
{ path: 'eager', component: EagerComponent },
{ path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
你看[的文档(https://angular.io/docs/ts/latest/guide /ngmodule.html)?他们展示了如何延迟加载路由,看起来你需要''pathMatch:'full''在你的子模块的根目录下。 – jonrsharpe