Как с помощью ngx осуществить перевод динамически приходящей переменной?

Для осуществления динамического перевода переменной с помощью ngx-translate, вам потребуется выполнить следующие шаги:

1. Установите ngx-translate в вашем проекте. Это можно сделать с помощью NPM, выполнив команду:

   npm install @ngx-translate/core @ngx-translate/http-loader

2. Подключите необходимые модули в вашем модуле приложения. Вам понадобятся TranslateModule и HttpClientModule. В TranslateModule вы также можете указать настройки для локализации и т.д. Пример подключения модулей в вашем app.module.ts:

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { HttpClientModule, HttpClient } from '@angular/common/http';
   import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
   import { TranslateHttpLoader } from '@ngx-translate/http-loader';

   export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
   }

   @NgModule({
     declarations: [AppComponent],
     imports: [
       BrowserModule,
       HttpClientModule,
       TranslateModule.forRoot({
         loader: {
           provide: TranslateLoader,
           useFactory: HttpLoaderFactory,
           deps: [HttpClient]
         }
       })
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

3. Создайте файлы перевода для каждой поддерживаемой локализации и заполните их необходимыми переводами. Например, для английского и русского языков создайте файлы en.json и ru.json соответственно. Примеры файлов:

   // en.json
   {
     "welcome": "Welcome!",
     "hello": "Hello, {{name}}!"
   }

   // ru.json
   {
     "welcome": "Добро пожаловать!",
     "hello": "Привет, {{name}}!"
   }

4. В вашем компоненте, где используется динамическая переменная, добавьте зависимость от TranslateService. Пример:

   import { Component } from '@angular/core';
   import { TranslateService } from '@ngx-translate/core';

   @Component({
     selector: 'app-my-component',
     template: `
       <h1>{{ 'welcome' | translate }}</h1>
       <p>{{ 'hello' | translate:{name: dynamicName} }}</p>
     `
   })
   export class MyComponent {
     dynamicName = 'John';

     constructor(private translateService: TranslateService) { }
   }

5. Инициализируйте TranslateService в вашем компоненте и установите локализацию, например для английского языка:

   import { Component, OnInit } from '@angular/core';
   import { TranslateService } from '@ngx-translate/core';

   @Component({
     selector: 'app-my-component',
     template: `
       <h1>{{ 'welcome' | translate }}</h1>
       <p>{{ 'hello' | translate:{name: dynamicName} }}</p>
     `
   })
   export class MyComponent implements OnInit {
     dynamicName = 'John';

     constructor(private translateService: TranslateService) { }

     ngOnInit() {
       this.translateService.setDefaultLang('en');
       this.translateService.use('en');
     }
   }

6. Если вы хотите поддерживать переключение языков в вашем приложении, вы можете добавить функционал переключения языка, используя методы TranslateService. Например, в вашем компоненте:

   import { Component, OnInit } from '@angular/core';
   import { TranslateService } from '@ngx-translate/core';

   @Component({
     selector: 'app-my-component',
     template: `
       <h1>{{ 'welcome' | translate }}</h1>
       <p>{{ 'hello' | translate:{name: dynamicName} }}</p>
       <button (click)="switchLanguage('en')">English</button>
       <button (click)="switchLanguage('ru')">Русский</button>
     `
   })
   export class MyComponent implements OnInit {
     dynamicName = 'John';

     constructor(private translateService: TranslateService) { }

     ngOnInit() {
       this.translateService.setDefaultLang('en');
       this.translateService.use('en');
     }

     switchLanguage(lang: string) {
       this.translateService.use(lang);
     }
   }

Надеюсь, эта подробная инструкция помогла вам осуществить динамический перевод переменной с помощью ngx-translate в Angular. Если у вас возникнут дополнительные вопросы или проблемы, не стесняйтесь задавать их.