如何在独立式main.ts中结合provideRouter使用并自定义PageTitleStrategy

1. 在独立式main.ts中结合provideRouter使用PageTitleStrategy #

要在独立式项目的main.ts里搭配provideRouter使用PageTitleStrategy，按以下步骤操作：

• 导入所需依赖：provideRouter、Routes、PageTitleStrategy、Title（可选，用于手动控制标题）、withComponentInputBinding()（可选，支持组件通过@Input接收路由标题）
• 在bootstrapApplication的providers数组中，同时配置路由和PageTitleStrategy提供者

代码示例：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes, PageTitleStrategy, Title } from '@angular/router';
import { AppComponent } from './app/app.component';
import { HomeComponent } from './app/home/home.component';
import { AboutComponent } from './app/about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent, title: '首页' },
  { path: 'about', component: AboutComponent, title: '关于我们' }
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withComponentInputBinding()),
    Title,
    { provide: PageTitleStrategy, useClass: PageTitleStrategy }
  ]
});

默认的PageTitleStrategy会自动读取路由配置里的title字段并设置页面标题，启用withComponentInputBinding()后，组件还能通过@Input() title接收标题值。

2. 在独立式main.ts中自定义页面标题策略 #

要实现和模块中一致的自定义标题策略效果，流程如下：

第一步：创建自定义标题策略类 #

继承Angular的PageTitleStrategy，实现自定义的标题更新逻辑：

import { PageTitleStrategy, RouterStateSnapshot } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomPageTitleStrategy extends PageTitleStrategy {
  constructor(private titleService: Title) {
    super();
  }

  override updateTitle(snapshot: RouterStateSnapshot): void {
    // 自定义逻辑：比如给标题添加固定前缀
    const pageTitle = snapshot.routeConfig?.title || '默认标题';
    this.titleService.setTitle(`MyApp | ${pageTitle}`);
  }
}

第二步：在main.ts中配置提供者 #

和模块中的配置逻辑一致，将PageTitleStrategy令牌指向自定义类即可：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes, PageTitleStrategy } from '@angular/router';
import { AppComponent } from './app/app.component';
import { CustomPageTitleStrategy } from './app/custom-page-title.strategy';
import { HomeComponent } from './app/home/home.component';
import { AboutComponent } from './app/about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent, title: '首页' },
  { path: 'about', component: AboutComponent, title: '关于我们' }
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    { provide: PageTitleStrategy, useClass: CustomPageTitleStrategy }
  ]
});

如果你的模块中使用了自定义令牌（比如MyTitleStrategy），先定义令牌：

import { InjectionToken } from '@angular/core';
import { PageTitleStrategy } from '@angular/router';

export const MyTitleStrategy = new InjectionToken<PageTitleStrategy>('MyTitleStrategy');

再在providers中配置：

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    { provide: MyTitleStrategy, useClass: CustomPageTitleStrategy }
  ]
});

这样就和模块中的配置效果完全一致。

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