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

Question

我在整个项目中使用了 ngx 翻译，它工作得很好 - 除了这种情况。

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

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

使用翻译的空下拉列表图像。

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

这是我的父组件的 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，但我不明白为什么管道不起作用，因为我宁愿这样做

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

Answer 1

尝试使用

selectedOption

作为 getter 方法，以便它始终获取最新值。我们将选定的值存储在属性

_selectedOption

上，如果未选择任何内容，则我们默认为

title

。

TS：

_selectedOption: string;

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

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