主页 / coding / 问题 / 78847972
Accepted
Sofie Buur
Asked: 2024-08-08 18:48:52 +0800 CST

ngx-translate 在翻译组件输入属性时返回空字符串

  • 772

我已经在整个项目中使用了 ngx Translation，并且它运行良好 - 除了这种情况。

我必须将父组件的输入属性转换为子组件“下拉列表”。
但输出只是一个空字符串！它适用于硬编码字符串，但不适用于翻译的字符串 - 根本没有显示任何内容，甚至没有翻译键。

我已经在我的语言文件中正确设置了翻译，它在其他场景中可以工作，但在这里不行。

使用翻译的空下拉菜单的图像。

带有硬编码标题输入值的下拉菜单图像。

这是我的父组件的 html 形式：

<dropdown
      [title]="'TimePeriod_Last30Days' | translate"
      [items]="[
                'Last 7 days',
                'Last 30 days',
                'Last 90 days',
                'Last 12 months'
                ]"
      (optionSelected)="onTimePeriodSelected($event)"
/>

这是我的下拉组件：

import { Component, Input, ElementRef, Renderer2, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.scss'],
})
export class DropdownComponent {
  @Input() items: string[] = [];
  @Input() title: string;// THIS STRING IS USED FOR DEFAULT DROPDOWN OPTION 
  @Output() optionSelected = new EventEmitter<string>();
  isOpen = false;
  selectedOption: string;
  
  constructor(private eRef: ElementRef, private renderer: Renderer2) {
    this.renderer.listen('window', 'click', (e: Event) => {
      if (!this.eRef.nativeElement.contains(e.target)) {
        this.isOpen = false;
      }
    });
  }
  
  ngOnInit() {
    this.selectedOption = this.title;
  }

  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }

  selectOption(option: string) {
    this.selectedOption = option;
    this.isOpen = false;
    this.optionSelected.emit(this.selectedOption);
  }
}

标题字符串用于默认下拉选项：

<div class="dropdown"> 
  <button class="dropdown-button" (click)="toggleDropdown()" [class.open]="isOpen">
    {{ selectedOption }} <i class="ci-Chevron_Down" id="chevron-down" [class.rotated]="isOpen"></i>
  </button>
  <div class="dropdown-content" *ngIf="isOpen">
    <p *ngFor="let item of items" (click)="selectOption(item)">{{ item }}</p>
  </div>
</div>

  • 我在其他场景中使用下拉菜单，因此无法硬编码默认值

  • 我确信有一种解决方案可以转换父组件 ts 中的值并将其提供给 html，但我不明白为什么管道不起作用，因为我宁愿这样做

  • 我已经三次检查我的翻译文件是否正确设置 - 我的应用程序的所有其他翻译都运行正常

angular

3 个回答

  1. Best Answer

    问题在于时间。使用翻译管道进行翻译是一种异步操作。当您尝试在 中应用标题时ngOnInit()，title输入尚未包含翻译的值。要修复此问题，您可以在输入设置器中执行逻辑，而不是ngOnInit()：

    @Input() set title(title: string) {
  if (title) {
    this.selectedOption = title;
  }
}
    • 2

  2. 尝试使用selectedOptiongetter 方法，以便它始终获取最新值。我们将选定的值存储在属性上_selectedOption，如果没有选择任何内容，则我们默认为title。

    TS：

    _selectedOption: string;

get selectedOption() {
    return this._selectedOption || this.title;
}

set selectedOption(value: any) {
    this._selectedOption = value;
}
    • 0

  3. 使用信号可以看起来像这样（并且 selectedOption 变得与标题相同）：

     export class DropdownComponent {
  
  public selectedOption = model<string>(undefined);
  protected isOpen = signal(false);
  public optionSelected = output<string>()

  constructor(private eRef: ElementRef, private renderer: Renderer2) {
    this.renderer.listen('window', 'click', (e: Event) => {
      if (!this.eRef.nativeElement.contains(e.target)) {
        this.isOpen.set(false)
      }
    });
  }
  

  protected toggleDropdown() {
    this.isOpen.update((state) => !state)
  }

  protected selectOption(option: string) {
    this.selectedOption.set(option)
    this.isOpen.set(false)
    this.optionSelected.emit(this.selectedOption);
  }
}

    从 html 中不要忘记从 selectedOption / isOpen 添加 ()，并且更好地使用 @for 并将 [title] 替换为 [selectedOption]，如果您愿意，也可以更改名称

    • 0

相关问题