面试题：Angular路由在单页应用国际化导航场景下的优化策略

语言切换时的路由配置

基于语言前缀的路由：在路由路径前添加语言代码作为前缀，例如 /en/home，/zh/home。在Angular中可以通过配置 RouterModule.forRoot 时，使用 {preloadingStrategy: PreloadAllModules} 并定义路由数组，如：

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

动态切换语言前缀：利用服务来动态切换语言前缀。创建一个 LanguageService，在其中维护当前语言状态。当语言切换时，更新路由中的语言前缀。可以通过 Router.navigate 方法实现，例如：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class LanguageService {
  private currentLanguage = 'en';

  constructor(private router: Router) {}

  setLanguage(lang: string) {
    this.currentLanguage = lang;
    const currentUrl = this.router.url;
    const segments = currentUrl.split('/');
    segments[1] = lang;
    const newUrl = segments.join('/');
    this.router.navigateByUrl(newUrl);
  }
}

SEO友好性

设置正确的元标签：在每个组件中，根据当前语言设置合适的元标签（title、description等）。可以使用 @angular/platform - browser 中的 Meta 服务。例如：

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

@Component({
  selector: 'app - home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private meta: Meta) {}

  ngOnInit() {
    // 根据当前语言设置元标签
    if (this.languageService.currentLanguage === 'en') {
      this.meta.updateTag({ name: 'description', content: 'The home page in English' });
      this.meta.updateTag({ name: 'title', content: 'Home - English' });
    } else {
      this.meta.updateTag({ name: 'description', content: '首页（中文）' });
      this.meta.updateTag({ name: 'title', content: '首页 - 中文' });
    }
  }
}

生成静态页面：对于SEO友好性，使用Angular Universal进行服务器端渲染（SSR），将单页应用渲染为静态HTML页面。这可以通过 @angular - universal 库实现。在服务器端，根据请求的语言生成对应的HTML内容。

避免因语言变化导致的性能问题

懒加载模块：对于不同语言的内容模块，采用懒加载的方式。在路由配置中，使用 loadChildren 来延迟加载模块。例如：

const routes: Routes = [
  {
    path: ':lang',
    children: [
      {
        path: 'home',
        loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
      },
      {
        path: 'about',
        loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
      }
    ]
  }
];

缓存策略：使用浏览器缓存机制，对于已经加载过的语言相关资源（如翻译文件、图片等），设置合适的缓存头。在Angular应用中，可以通过配置服务器端（如使用Node.js的Express框架）来设置缓存头。例如：

const express = require('express');
const app = express();

app.get('/assets/translations/*.json', (req, res) => {
  res.set('Cache - Control', 'public, max - age = 31536000'); // 缓存一年
  // 发送翻译文件
});

代码优化：优化翻译文件的大小，去除不必要的翻译内容。在Angular中，可以使用工具如 ngx - translate - extract 来提取并优化翻译文件。同时，避免在语言切换时进行大量的重复计算或DOM操作。

星途面试题库

面试题：Angular路由在单页应用国际化导航场景下的优化策略

知识考点

面试题答案

语言切换时的路由配置

SEO友好性

避免因语言变化导致的性能问题