我正在尝试实现角形6延迟加载,我希望在我的主主页中有指向每个特定功能组件的链接。
我的项目是如下所示:
app.module.ts
|__homepage.component.ts
|__options.component.ts
|__feature.module.ts
|__buy.component.ts
|__sell.component.ts
来自homepage.component
**,用户的可能可以直接访问** buy.component
和 sell.component
**.**
如何构建homepage.component
中的路由或链接以实现这一点?
您可以从下面的代码中注意到,我的延迟加载路由只指向模块,但是默认情况下触发的''
路由并不总是用户希望访问的路径(如果他/她单击" sell ",他想查看sell组件,反之亦然),我希望避免为每个模块…创建一个子主页。
到目前为止,这是我的路线代码:
app.routing.ts
const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'options',
component: OptionsComponent
},
{
path: 'buy',
loadChildren: "../app/posts/feature.module#FeatureModule"
},
{
path: 'sell',
loadChildren: "../app/posts/feature.module#FeatureModule"
}
];
feature.routing.ts
{
path: '',
redirectTo: '/buy',
pathMatch: 'full'
},
{
path: 'buy',
component: BuyComponent
},
{
path: 'sell',
component: SellComponent
}
PS:如果需要的话,我会随时提供任何澄清
发布于 2018-07-19 07:12:48
您可以为特性模块创建一个单独的path
,比如在app.routing module
中作为'inventory'
。功能模块将适当地加载其子路由(buy and sell)
。这样,您就不需要指定FeatureModule
在app.routing.module
中的所有子路由。
app.routing
const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'options',
component: OptionsComponent
},
{
path: 'inventory', // some other path to load feature module
loadChildren: "../app/posts/feature.module#FeatureModule"
}
];
编辑:
因此,到功能模块的路由看起来就像
routerLink="/inventory/buy"
或routerLink="/inventory/sell"
或简单的routerLink="/inventory"
,它将重定向到/inventory/buy
发布于 2018-07-19 07:17:21
当你做子功能模块时,你的路线也会改变。
您应该为您的功能模块创建一个路由,为您的组件创建一个子路由。
示例:
app.routing.ts
const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'options',
component: OptionsComponent
},
{
path: 'feature',
loadChildren: "../app/posts/feature.module#FeatureModule"
}
];
feature.routing.ts
{
path: '',
redirectTo: '/buy',
pathMatch: 'full'
},
{
path: 'buy',
component: BuyComponent
},
{
path: 'sell',
component: SellComponent
}
导航到路由:
routerLink="/feature/buy"
或
this.router.navigateByUrl("/feature/buy");
https://stackoverflow.com/questions/51416354
复制相似问题