Angular 4中如何将assets/i18n下的en.json导入组件.ts文件？

方式一：直接导入JSON文件（需调整TypeScript配置） #

这种方式适合你的TypeScript版本支持resolveJsonModule（一般TypeScript 2.9+，Angular 4.3+通常配套这个版本），步骤如下：

1. 修改tsconfig.json配置
   在项目根目录的tsconfig.json中，找到compilerOptions，添加以下配置项，确保TypeScript允许导入JSON模块：

   {
     "compilerOptions": {
       "resolveJsonModule": true,
       "allowSyntheticDefaultImports": true,
       "esModuleInterop": true
     }
   }
   

2. 在组件中导入JSON文件
   根据你的组件.ts文件位置，调整相对路径导入en.json：

   // 假设组件在src/app/components/example目录下，en.json在src/assets/i18n/
   import * as enTranslations from '../../../assets/i18n/en.json';
   

3. 使用翻译对象
   现在你可以直接在组件类中使用导入的翻译对象了，比如：

   import { Component } from '@angular/core';
   import * as enTranslations from '../../../assets/i18n/en.json';
   
   @Component({
     selector: 'app-example',
     templateUrl: './example.component.html'
   })
   export class ExampleComponent {
     // 把翻译对象赋值给组件属性，方便模板中使用
     public translations = enTranslations;
   
     getWelcomeMessage() {
       // 假设en.json中有"welcome": "Welcome to our app!"的键值对
       return this.translations.welcome;
     }
   }
   

   模板里也可以直接用：{{ translations.welcome }}

方式二：用HttpClient加载JSON文件（兼容更早版本） #

如果你的TypeScript版本不支持直接导入JSON，或者更倾向于异步加载翻译内容，可以用Angular的HttpClient来获取：

1. 确保HttpClientModule已导入
   在你的根模块（比如AppModule）中导入HttpClientModule：

   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
     imports: [
       // ...其他模块
       HttpClientModule
     ]
   })
   export class AppModule { }
   

2. 在组件中注入HttpClient并加载JSON

   import { Component, OnInit } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Component({
     selector: 'app-example',
     templateUrl: './example.component.html'
   })
   export class ExampleComponent implements OnInit {
     public translations: any;
   
     constructor(private http: HttpClient) { }
   
     ngOnInit() {
       // 异步加载en.json
       this.http.get('/assets/i18n/en.json').subscribe((data) => {
         this.translations = data;
         // 加载完成后就可以使用this.translations了
         console.log('翻译内容加载完成:', this.translations);
       });
     }
   }
   

   注意：这种方式是异步的，所以模板中最好加个判断避免报错：{{ translations?.welcome }}

两种方式都能满足你的需求，你可以根据项目的TS版本和实际场景选择~

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