在Angular中,可以使用RouterOutlet指令来定义路由出口。在模板中,可以使用该指令来指定特定路由的出口。
首先,需要在模板中定义一个
以下是一个示例代码:
在app.component.html中:
在app-routing.module.ts中的路由配置:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AdminComponent } from './admin.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'admin', component: AdminComponent, outlet: 'admin' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在admin.component.html中:
This is the admin component
在上述示例中,
这样,当访问/admin路由时,Angular会将AdminComponent组件加载到名为admin的路由出口中,而不是默认的路由出口。
希望对你有所帮助!
下一篇:Angular的路由和URL处理