Angular中如何根据客户端切换动态修改页面标题（不可改仓库）

因为你没法直接修改仓库里的index.html文件，完全可以通过Angular的内置能力在客户端动态替换标题，下面是具体实现方式：

方法一：用Angular Title服务全局设置 #

Angular自带Title服务，专门用来操作页面标题，步骤如下：

1. 在根组件AppComponent中引入Title服务并设置标题：

import { Title } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private titleService: Title) {}

  ngOnInit(): void {
    // 替换原标题"Rope"为你想要的内容
    this.titleService.setTitle('新的页面标题');
  }
}

应用启动后，页面标题会自动替换成你设置的内容，覆盖index.html里的初始值。

方法二：结合路由动态切换标题 #

如果需要在不同路由页面显示不同标题，可以配合路由数据实现：

1. 在路由配置中添加title字段：

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

2. 在根组件中监听路由变化，动态设置标题：

import { Title } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private titleService: Title,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => {
        let route = this.activatedRoute;
        while (route.firstChild) route = route.firstChild;
        return route.snapshot.data['title'] || '默认标题';
      })
    ).subscribe(title => {
      this.titleService.setTitle(title);
    });
  }
}

这样每次路由切换时，页面标题会自动更新为对应路由配置的标题。

补充：关于初始加载闪烁 #

如果担心页面加载时先显示index.html里的"Rope"再替换导致闪烁，由于你无法修改仓库文件，这个短暂的闪烁是不可避免的，但Angular启动速度较快，大部分场景下用户几乎察觉不到。

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