面试题：Angular指令与多语言动态绑定

设计指令与多语言服务集成：

依赖注入多语言服务：在指令的构造函数中通过依赖注入引入Angular的国际化（i18n）相关服务，比如TranslateService（假设使用常见的翻译库如@ngx - translate/core）。

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

@Directive({
  selector: '[appDynamicLangText]'
})
export class DynamicLangTextDirective implements OnInit {
  @Input() key: string;
  constructor(private translateService: TranslateService) {}

  ngOnInit() {
    // 根据当前语言环境获取对应文本
  }
}

监听语言变化：订阅多语言服务的语言变化事件，以便在语言切换时更新指令显示的文本。

ngOnInit() {
  this.translateService.onLangChange.subscribe(() => {
    this.updateText();
  });
  this.updateText();
}

处理指令内部文本的国际化：

定义翻译键：通过@Input()装饰器接收一个翻译键，这个键对应翻译文件中的具体文本。

@Input() key: string;

获取翻译文本：在指令的某个生命周期钩子（如ngOnInit）中，使用多语言服务根据当前语言环境获取对应的文本，并更新指令所在元素的文本内容。

private updateText() {
  if (this.key) {
    this.translateService.get(this.key).subscribe((translation) => {
      const element = document.querySelector(`[appDynamicLangText][key = "${this.key}"]`);
      if (element) {
        element.textContent = translation;
      }
    });
  }
}

默认值处理：可以为指令添加一个可选的默认值输入属性，当翻译文本不存在时显示默认值。

@Input() defaultValue: string;
private updateText() {
  if (this.key) {
    this.translateService.get(this.key, { defaultValue: this.defaultValue }).subscribe((translation) => {
      const element = document.querySelector(`[appDynamicLangText][key = "${this.key}"]`);
      if (element) {
        element.textContent = translation;
      }
    });
  }
}

星途面试题库

面试题：Angular指令与多语言动态绑定

知识考点

面试题答案