首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >角度延迟加载:指向特定特征组件的路由

角度延迟加载:指向特定特征组件的路由
EN

Stack Overflow用户
提问于 2018-07-19 07:05:00
回答 2查看 1.6K关注 0票数 6

我正在尝试实现角形6延迟加载,我希望在我的主主页中有指向每个特定功能组件的链接。

我的项目是如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
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

代码语言:javascript
代码运行次数:0
运行
复制
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

代码语言:javascript
代码运行次数:0
运行
复制
{
    path: '',
    redirectTo: '/buy',
    pathMatch: 'full'
  },
  {
    path: 'buy',
    component: BuyComponent
  },
  {
    path: 'sell',
    component: SellComponent
  }

PS:如果需要的话,我会随时提供任何澄清

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-19 07:12:48

您可以为特性模块创建一个单独的path,比如在app.routing module中作为'inventory'。功能模块将适当地加载其子路由(buy and sell)。这样,您就不需要指定FeatureModuleapp.routing.module中的所有子路由。

app.routing

代码语言:javascript
代码运行次数:0
运行
复制
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

票数 5
EN

Stack Overflow用户

发布于 2018-07-19 07:17:21

当你做子功能模块时,你的路线也会改变。

您应该为您的功能模块创建一个路由,为您的组件创建一个子路由。

示例:

app.routing.ts

代码语言:javascript
代码运行次数:0
运行
复制
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

代码语言:javascript
代码运行次数:0
运行
复制
  {
    path: '',
    redirectTo: '/buy',
    pathMatch: 'full'
  },
  {
    path: 'buy',
    component: BuyComponent
  },
  {
    path: 'sell',
    component: SellComponent
  }

导航到路由:

代码语言:javascript
代码运行次数:0
运行
复制
routerLink="/feature/buy"

代码语言:javascript
代码运行次数:0
运行
复制
this.router.navigateByUrl("/feature/buy");
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51416354

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档