在Angular中，我们可以使用outlets来创建路由。outlets允许我们在同一个组件中显示多个路由视图。

首先，在app.module.ts中导入RouterModule和Routes模块，并定义要使用的路由。在Routes数组中，我们可以定义多个路由，并为每个路由指定相应的组件。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

接下来，在app.component.html中使用router-outlet指令来显示路由视图。我们还可以使用routerLink指令来导航到不同的路由。

My App

现在，我们可以使用outlets创建具有多个路由视图的组件。在app.component.html中，我们可以使用named router-outlet指令来指定每个路由的视图位置。

My App

然后，在app.module.ts中定义多个路由，并为每个路由指定要显示的组件和outlet名称。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent, outlet: 'primary' },
  { path: 'about', component: AboutComponent, outlet: 'primary' },
  { path: 'contact', component: ContactComponent, outlet: 'secondary' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

现在，我们可以在同一个组件中使用不同的outlet来显示不同的路由视图。

My App

通过使用outlets，我们可以在同一个组件中显示多个路由视图，并根据需要进行导航和切换。