Angular多路由出口配置_angular 多路由出口-优快云博客

本文链接：https://blog.youkuaiyun.com/oneloser/article/details/105800001

本文介绍了在Angular中设置多路由出口的思路和步骤，包括在`app-routing.module.ts`中配置路由对象的`outlet`属性，以及在模板中使用指定`name`属性的`router-outlet`，确保两者匹配实现多路由出口的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、大体思路

主要通过指定router-outlet的name属性，并在路由配置文件中指定路由对象的outlet属性，router-outlet
的name属性和路由对象的outlet属性的值保持一致即可。

2、app-routing.module.ts的代码

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

import { Test00Component } from './component/test00/test00.component';
import { Test01Component } from './component/test01/test01.component';
import { Test02Component } from './component/test02/test02.component';

const routes: Routes = [
  {
    path: '',
    component: Test00Component
  },
  {
    path: 'test00',
    component: Test00Component
  },
  {
    path: '',
    component: Test01Component,
    outlet: 'test'
  },
  {
    path: 'test01',
    component: Test01Component,
    outlet: 'test'
  },
  {
    path: 'test02',
    component: Test02Component,
    outlet: 'test'
  }
];

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

3、模板中的代码

<router-outlet></router-outlet>
<a [routerLink]="[{outlets: {test: 'test01'}}]">test01</a>
<a [routerLink]="[{outlets: {test: 'test02'}}]">test02</a>
<router-outlet name="test"></router-outlet>