Перевод в проекте Angular

Question

Я работаю в проекте Angular, где существует файл json, расположенный в src \ assets \ i18n, содержащий переводы на Swedi sh:

{
  "COMMON": {
    "BUTTON-NO-FILE": "Dokument saknas",
    "BUTTON-EDIT": "Redigera",
    "BUTTON-SAVE": "Spara",
    "BUTTON-CANCEL": "Avbryt",
    "BUTTON-OK": "Ok",
    "BUTTON-CLOSE": "Stäng",
    "ERRORS": {
      "GENERAL-TITLE": "Ett fel har inträffat",
      "401-MSG": "Testing 401 message",
      "499-MSG": "Applikationen svarar inte, försök igen senare.",
      "403-MSG": "Handlingen kan inte utföras, kontrollera din behörighet.",
      "404-MSG": "Resurserna som du försöker nå finns inte.",
      "400-MSG": "Ett fel har inträffat. Kontakta HSB om felet fortfarande kvarstår."
    }
  }
}

Как видите, Я добавил сообщение с кодом ошибки 401: «Тестирование сообщения 401».

Теперь это файл, в котором отображаются сообщения об ошибках в файле json перевода, в зависимости от статуса ошибки:

import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { MessageDialogService } from '@hsbweb/hsb-shared-components-module';
import { TranslateService } from '@ngx-translate/core';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  constructor(
    private messageDialogService: MessageDialogService,
    private translate: TranslateService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return next.handle(request)
          .pipe(
              catchError((error: HttpErrorResponse) => {
                  let errorMessage = '';
                  switch (error.status) {
                    case 499:
                      errorMessage = this.translate.instant('COMMON.ERRORS.499-MSG');
                      break;
                    case 404:
                      errorMessage = this.translate.instant('COMMON.ERRORS.404-MSG');
                      break;
                    case 403:
                      errorMessage = this.translate.instant('COMMON.ERRORS.403-MSG');
                      break;
                    case 400:
                      errorMessage = this.translate.instant('COMMON.ERRORS.400-MSG');
                      break;
                    case 401:
                      errorMessage = this.translate.instant('COMMON.ERRORS.401-MSG');
                      break;
                    default:
                      errorMessage = this.translate.instant('COMMON.ERRORS.400-MSG');
                      break;
                  }
                  this.messageDialogService.error(
                    this.translate.instant('COMMON.ERRORS.GENERAL-TITLE'),
                    errorMessage,
                    this.translate.instant('COMMON.BUTTON-OK'));

                  return throwError(error);
              })
          );
  }
}

Как видите, я добавил свой случай для сообщения 401. Но у меня проблема в том, что он печатает строку COMMON.ERRORS.401-MSG вместо значения в файле перевода.

Итак, мой вопрос в том, нужно ли мне что-то делать с файлом json после того, как я отредактировал Это? Я пробовал перекомпилировать проект angular, но это тоже не помогло.

Я новичок в Angular. Как я могу продолжить?

Answer 1

здесь пара вещей.

• Вы передаете строковый литерал 'COMMON.ERRORS.4xx-MSG'
• Удалите кавычки
• Для доступа к элементам в json через Angular вы можете использовать HttpClient для их получения.

Взгляните на этот пример для службы, которую вы можете использовать для извлечения json объектов из файла (я не знаю Я не тестировал это, но я уверен, что это сработает)

@Injectable({
    providedIn: 'root'
})
export class AppConfigProvider {
    public settings: AppConfig;

    constructor(
        private http: HttpClient
    ) {}

    load(): Promise<any> {
        const jsonFile = `src\assets\i18n.json`;
        return this.http
            .get<AppConfig>(jsonFile)
            .pipe(
                tap(res => {
                    this.settings = res;
                })
            )
            .toPromise();
    }

    public getAppSetting(path: string) {
           return Object.keys(this.settings)
            .filter(setting => setting.includes(path))
            .map(filteredSetting => this.settings[filteredSetting]);
    }
}

Вам нужно будет добавить следующее для любых ресурсов, которые вы хотите, чтобы ваш проект Angular правильно загружал и ссылался на него.

В ваших angular.json проектах.app-name.architect.build.assets []

{
 "glob": "*.json",
 "input": "src/assets/config",
 "output": "assets/config"
}

Если это слишком много. Я бы рекомендовал заменить файл. json файлом констант в ваших проектах. Затем вы можете просто импортировать их как обычно, а не делать всю эту службу приложения. Это немного перебор.

Дайте мне знать, если есть что-то, что не имеет смысла. Ура.