在Angular中,可以通过使用多个
来实现多个路由出口。下面是一个示例:
app.component.html
中添加两个路由出口:
app-routing.module.ts
中定义路由配置:import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { SecondaryComponent } from './secondary.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'secondary', component: SecondaryComponent, outlet: 'secondary' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
创建两个组件home.component.ts
和secondary.component.ts
,并在模板中添加对应的内容。
在app.module.ts
中导入AppRoutingModule
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { SecondaryComponent } from './secondary.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
SecondaryComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当你访问''
路径时,HomeComponent
会在默认的路由出口中显示。当你访问'/secondary'
路径时,SecondaryComponent
会在名为secondary
的路由出口中显示。
注意:如果你想在代码中导航到带有命名路由出口的路径,可以使用Router.navigate
方法的extras
参数,例如:
this.router.navigate([{ outlets: { secondary: 'secondary' }}]);
这样可以实现在不同的路由出口中导航。