在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' }}]);
这样可以实现在不同的路由出口中导航。