角延迟加载：路由到特定要素组件

Question

我正在尝试实现有角度的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为了实现此目的，应该如何构造路线或链接？

从下面的代码中您可以注意到，我的延迟加载路线仅指向模块，但''默认情况下触发的路线并不总是用户要访问的路线（如果他/她点击了“出售” “，他想查看“销售”的销售组件，反之亦然），并且我想避免为每个模块创建子主页...

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

应用程序路由

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功能模块，如'inventory'中所示app.routing module。并且功能模块将(buy and sell)适当地加载其子路由。这样你就不需要指定FeatureModule内部的所有子路由app.routing.module

应用程序路由

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

当你制作子功能模块时，你的路线也会改变。

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

例子：

应用程序路由.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"
  }
];

功能.路由.ts

  {
    path: '',
    redirectTo: '/buy',
    pathMatch: 'full'
  },
  {
    path: 'buy',
    component: BuyComponent
  },
  {
    path: 'sell',
    component: SellComponent
  }

导航至路线：

routerLink="/feature/buy"

或者

this.router.navigateByUrl("/feature/buy");