我正在为我的有角度的网站设置路由。下面是我希望在每个已加载组件上拥有的组件结构和路径名:
/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,但是这种方法也可以创建上述路径。
有人知道如何正确设置它吗?可能吗?
答案 0 :(得分:0)
如果您不使用子模块而仅使用组件,则可以执行以下操作:
首先,请定义与本示例类似的路线
{
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
子级的工作类似。
将路由与模块结合使用会有所不同。让我知道您是否使用模块。