Question

我正在为我的有角度的网站设置路由。下面是我希望在每个已加载组件上拥有的组件结构和路径名：

/app
   /start-page-container (www.mypage.com)
      /price (www.mypage.com/price)
      /about (www.mypage.com/about)
   /secound-page-container
      /dashboard (www.mypage.com/dashboard)
      /charts (www.mypage.com/charts)
      /tables (www.mypage.com/tables)

当我的组件具有不同的容器和路径（www.mypage.com）的公共第一部分时，我不知道如何重定向特定的子页面。我心里有两个方法。
第一：

{path: '', loadChildren: 'app/start-page-container#MyPageModule'},
{path: 'dashboard', loadChildren: 'app/secound-page-container#SecondPageContainer'}

，然后（在每个容器内）第二个路由器：

{ path: '', component: DashboardComponent },
{ path: 'charts ', component: ChartsComponent },
{ path: 'tables', component: TablesComponent }

但是该方法将建立类似www.mypage.com/dashboard/charts的路径，而不是www.mypage.com/charts。
第二种方法：
它与first类似，但是loadChildren使用children并加载嵌套的componenet，但是这种方法也可以创建上述路径。

有人知道如何正确设置它吗？可能吗？

Answer 1

如果您不使用子模块而仅使用组件，则可以执行以下操作：

首先，请定义与本示例类似的路线

{
  path: '/', component: StartPageContainerComponent, children: [
    { path: 'price', component: PriceComponent },
    { path: 'about', component: AboutComponent }
  ]
}, {
  path: '/dashboard', component: DashboardComponent, children: [
    { path: 'charts', component: ChartsComponent }
  ]
}

您可以在app.component的模板中使用

<router-outlet></router-outlet>

导航到StartPageContainerComponent时将显示mypage.com，导航到DashboardComponent时将显示mypage.com/dashboard。

在您的StartPageContainerComponent中，您也可以使用路由器插座显示子路由

<router-outlet></router-outlet>

，它将显示子路线，例如mypage.com/startPage/price。 PriceComponent将显示在StartPageContainerComponent中。实施DashboardComponent子级的工作类似。

将路由与模块结合使用会有所不同。让我知道您是否使用模块。

如何设置嵌套组件的路由

1 个答案: