如何在Angular的app.component.ts中按浏览器语言动态按需加载脚本？

Got it, let's tackle this problem step by step. Since you want to load scripts dynamically based on the browser's language in your Angular 2 app (using TypeScript), here's a solid approach that should work reliably, especially if your previous attempt in home.component.ts wasn't hitting the mark.

1. 实现动态加载脚本的核心函数 #

First, add a reusable function in app.component.ts that handles creating script tags, appending them to the DOM, and handling load/error states. This avoids duplicate script loads and ensures you know when the script is ready to use.

private loadScript(scriptUrl: string): Promise<void> {
  return new Promise((resolve, reject) => {
    // 检查脚本是否已存在，避免重复加载
    const existingScript = document.querySelector(`script[src="${scriptUrl}"]`);
    if (existingScript) {
      resolve();
      return;
    }

    const script = document.createElement('script');
    script.src = scriptUrl;
    script.type = 'text/javascript';
    script.onload = () => {
      console.log(`脚本加载成功: ${scriptUrl}`);
      resolve();
    };
    script.onerror = () => {
      console.error(`脚本加载失败: ${scriptUrl}`);
      reject(new Error(`脚本 ${scriptUrl} 加载失败`));
    };

    document.body.appendChild(script);
  });
}

2. 获取浏览器的语言设置 #

接下来写一个工具函数获取用户的浏览器语言，兼顾跨浏览器兼容性（包括旧版IE），并标准化语言代码（比如把zh-CN简化为zh，如果你的脚本只区分语言不区分地区）。

private getUserLanguage(): string {
  // 获取浏览器语言，默认回退到英文
  const language = navigator.language || (navigator as any).userLanguage || 'en';
  // 提取两位语言代码（如果需要地区代码可以去掉这一步）
  return language.split('-')[0].toLowerCase();
}

3. 在根组件生命周期中触发加载 #

因为app.component.ts是你的根组件，用ngOnInit钩子在应用初始化时触发脚本加载。在这里你可以把语言代码映射到对应的脚本路径。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    this.loadLanguageSpecificScript();
  }

  private async loadLanguageSpecificScript(): Promise<void> {
    const userLang = this.getUserLanguage();
    let scriptUrl = '';

    // 映射语言代码到对应的脚本路径
    switch (userLang) {
      case 'zh':
        scriptUrl = '/assets/scripts/zh-localization.js';
        break;
      case 'es':
        scriptUrl = '/assets/scripts/es-localization.js';
        break;
      // 根据需求添加更多语言分支
      default:
        scriptUrl = '/assets/scripts/en-localization.js';
        break;
    }

    try {
      await this.loadScript(scriptUrl);
      // 如果需要在脚本加载完成后执行代码，写在这里
      // 比如初始化脚本提供的全局方法
    } catch (error) {
      // 处理加载失败的情况，比如回退到默认脚本
      console.error('语言脚本加载失败，回退到英文版本:', error);
      await this.loadScript('/assets/scripts/en-localization.js');
    }
  }

  // 粘贴上面的loadScript和getUserLanguage函数
  private loadScript(scriptUrl: string): Promise<void> {
    // ... 同上 ...
  }

  private getUserLanguage(): string {
    // ... 同上 ...
  }
}

4. 排查之前home.component.ts的问题 #

如果之前在home.component.ts里的实现没生效，常见原因有这些：

• 时机问题：脚本是异步加载的，你的组件可能在脚本加载完成前就尝试使用它的功能。用async/await或Promise可以确保等待脚本加载完成后再执行后续代码。
• 组件层级问题：home.component是子组件，初始化时机可能晚于依赖该脚本的其他模块。从根组件app.component加载能保证脚本尽早可用。
• 重复加载：如果多次导航到首页，可能重复加载脚本导致冲突。上面的loadScript函数会检查已存在的脚本，避免重复加载。
• 路径错误：确认脚本路径是相对于应用根目录的（比如脚本放在src/assets/scripts下，路径写/assets/scripts/...是正确的）。

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