当我更改语言时，如何用transloco动态地转换TypeScript组件？

Question

关于TranslocoService在TypeScript中的使用，我有一个问题。假设我有两个用于西班牙语和葡萄牙语的lang文件，比如es.json和pt.json。现在假设我有一个组件在某个地方显示不同的标签，如下面的代码

import { TranslocoService } from '@ngneat/transloco';
...

@Component({
  selector: 'app-powerbi',
  templateUrl: './powerbi.component.html',
  styleUrls: ['./powerbi.component.scss']
})

export class PowerbiComponent implements OnInit, OnDestroy {
...
contructor(
    private cdRef: ChangeDetectorRef, 
    private powerbiService: PowerbiService,
    private userservice: UserService, 
    private router: Router, 
    private loginservice: LoginService, 
    private store: Store<AppState>,
    private translocoService: TranslocoService
    )
    { 
      translocoService.setAvailableLangs([{ id: 'es', label: 'Spanish' }, {id: 'pt', label: 'Portuguese'}])
    }
...
 var diccionarioReports = [
              {
                titulo: this.translocoService.translateObject('powerbi.label1'),
                icono: 'grass',
                condicion: true
              },
              {
                titulo: this.translocoService.translateObject('powerbi.label2'),
                icono: 'water_drop',
                condicion: this.esCanha
              }
    ]
}

我试着省略那些似乎无关紧要的代码。请注意，由于我现在所处的情况，我对自己正在做的事情不太了解。但是，当我更改语言时，这些标签不会像HTML管道对transloco那样改变语言。如何在不重新加载的情况下动态更改这些“标签”？如果需要更多的信息，请索取。

Answer 1

translocoService有您可以订阅的语言更改订阅，然后根据您应该能够更新标签的更改来订阅

destroyed$ = new Subject<void>();

contructor(
    private cdRef: ChangeDetectorRef, 
    private powerbiService: PowerbiService,
    private userservice: UserService, 
    private router: Router, 
    private loginservice: LoginService, 
    private store: Store<AppState>,
    private translocoService: TranslocoService
    )
    { 
      translocoService.setAvailableLangs([{ id: 'es', label: 'Spanish' }, {id: 'pt', label: 'Portuguese'}])
    }
    
ngOnInit(): void {    this.translocoService.langChanges$.pipe(takeUntil(this.destroyed$)).subscribe((res) => {
                // If the file is empty that means no data found in cache and needs to wait for the data to be loaded successfully 
                if (_.isEmpty(this.translocoService.getTranslation(res))) {
                    this.subscription = this.translocoService.events$
                        .pipe(
                            filter((e) => e.type === 'translationLoadSuccess'),
                            takeUntil(this.destroyed$),
                        )
                        .subscribe((obj) => {
                            // Reload the translation here
                        });
                } else {
                    // Reload the translation here
                }
            });
}

ngOnDestroy() {
        this.destroyed$.next();
        this.destroyed$.complete();
    }