Angular 17中如何从含Router Outlet的页面导航到独立外部页面？

1. 在模板中添加命名路由出口 #

在你的根组件模板（比如app.component.html）里，保留原有主路由出口的同时，新增一个带名称的路由出口，用来单独渲染博客页面：

<!-- 标题栏导航菜单 -->
<header>
  <nav>
    <a routerLink="/buy">买房</a>
    <a routerLink="/sell">卖房</a>
    <!-- 博客菜单的路由链接要指向命名出口 -->
    <a [routerLink]="[{ outlets: { blog: ['blog'] } }]">博客</a>
  </nav>
</header>

<!-- 原有主内容路由出口 -->
<main>
  <router-outlet></router-outlet>
</main>

<!-- 博客专属的命名路由出口 -->
<router-outlet name="blog"></router-outlet>

2. 配置路由规则 #

在app-routing.module.ts中，给博客页面的路由指定对应的命名出口：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BuyComponent } from './buy/buy.component';
import { SellComponent } from './sell/sell.component';
import { BlogComponent } from './blog/blog.component';

const routes: Routes = [
  { path: 'buy', component: BuyComponent },
  { path: 'sell', component: SellComponent },
  // 明确指定该路由渲染到名为blog的出口
  { path: 'blog', component: BlogComponent, outlet: 'blog' },
  { path: '', redirectTo: '/buy', pathMatch: 'full' }
];

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

3. 优化导航行为 #

• 默认点击博客菜单后，主路由出口的内容会保留（URL格式类似/buy(blog:blog)），如果希望点击博客时仅展示博客内容、清空主出口，可以修改路由链接：

<a [routerLink]="[{ outlets: { primary: [], blog: ['blog'] } }]">博客</a>

此时URL会变为/(blog:blog)，主路由出口无组件渲染，仅显示博客内容。

4. 与子路由兼容 #

你熟悉的子路由用法不受影响，主路由下的子路由依然会渲染在主路由出口中，和博客的命名出口完全独立。比如：

{ 
  path: 'sell', 
  component: SellComponent,
  children: [
    { path: 'publish', component: PublishHouseComponent }
  ]
}

这个子路由依然正常工作，不会干扰博客页面的展示。

内容的提问来源于stack exchange，提问作者Abdul Bamallson