角度延迟加载：路由到特定功能组件

Question

我正在尝试实现 Angular 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组件，反之亦然“buy”）我想避免为每个模块创建子主页......

到目前为止，这是我在路线上的代码：

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：如有需要，我会提供任何澄清

Answer 1

您可以为功能模块创建一个单独的path，例如app.routing module 中的'inventory'。并且功能模块将适当地加载其子路由(buy and sell)。有了这个，您无需在app.routing.module 内指定FeatureModule 的所有子路由

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

Answer 2

当您制作子功能模块时，您的路线也会发生变化。

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

例子：

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");