在Angular 6中,可以使用辅助路由来在同一页面上同时显示多个路由。以下是一个示例,演示了如何在Angular 6中使用辅助路由。
首先,打开app.module.ts
文件,并导入RouterModule
和Routes
:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
然后在@NgModule
的imports
数组中添加RouterModule.forRoot(appRoutes)
,其中appRoutes
是我们定义的路由配置。示例中的路由配置如下:
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{
path: 'contact',
component: ContactComponent,
outlet: 'sidebar' // 辅助路由的名称为'sidebar'
}
];
在示例中,我们定义了三个主要路由:home
,about
和contact
。contact
路由是一个辅助路由,并使用outlet
属性指定了它的名称为'sidebar'
。
接下来,为了在模板中使用辅助路由,打开app.component.html
文件,并添加以下代码:
以上代码中的
用于显示主要路由的组件,而
用于显示辅助路由的组件。
最后,通过使用routerLink
指令来导航到指定的路由。示例中的导航代码如下:
Home
About
Contact
以上代码中的routerLink
指令用于导航到指定的路由,routerLinkActive
指令用于在当前路由被激活时添加一个CSS类。
这样,当你点击导航链接时,主要路由和辅助路由的组件都会在页面上显示。
希望以上示例能帮助你解决问题!