在Angular 7中使用子路由需要做以下几个步骤:
app.module.ts
文件中导入RouterModule
和Routes
模块,并定义子路由。示例代码如下:import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{
path: 'dashboard',
component: DashboardComponent,
children: [
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'overview', component: OverviewComponent },
{ path: 'details', component: DetailsComponent }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
标签,用于显示子路由的内容。示例代码如下:
My App
:host {
display: block;
height: 100%;
}
router-outlet {
display: block;
height: 100%;
}
标签,用于显示子路由的内容。示例代码如下:
Dashboard
以上代码示例了如何在Angular 7中使用子路由。通过定义父组件和子组件的路由,可以实现在父组件中显示子组件的内容。使用
标签可以将子路由的内容显示在父组件的模板文件中。