Angular 5中焦点触发数据绑定的原因及多语言应用性能优化咨询

嘿，我来帮你拆解这个Angular多语言的性能坑——我之前做类似项目时也踩过几乎一样的雷，咱们一步步来捋清楚问题和解决方案：

你碰到的核心问题其实有两个叠加的点：

1. 模板直接调用方法的隐患：你在login组件模板里直接调用usernamePlaceholder.GetTranslation(mainController.CurrentCulture)，Angular的变更检测机制无法追踪这个方法调用的依赖关系——它没办法判断返回值是否变化，所以每次触发变更检测时都会重新执行这个方法，哪怕文化值根本没改。
2. 变更检测策略的覆盖范围：你只给culture-selector组件加了OnPush，但login组件大概率还是默认的Default策略。焦点变化属于Angular默认会触发全局变更检测的DOM事件，这时候login组件的所有模板表达式都会被重新计算，自然就导致所有翻译方法被批量调用了。

下面是几个能彻底解决这个问题的方案，按推荐优先级排序：

方案1：用纯管道（Pipe）封装翻译逻辑 #

这是最优雅的解决方案，因为Angular的纯管道会自动缓存结果——只有当输入的参数（LocalizedString实例或currentCulture）变化时，才会重新执行翻译方法。

步骤1：创建TranslatePipe #

import { Pipe, PipeTransform } from '@angular/core';
import { LocalizedString } from './path-to-your-localized-string-class';

@Pipe({ 
  name: 'translate',
  pure: true // 纯管道默认开启，自动缓存结果
})
export class TranslatePipe implements PipeTransform {
  transform(localizedString: LocalizedString, currentCulture: string): string {
    return localizedString.GetTranslation(currentCulture);
  }
}

步骤2：在模板中替换方法调用 #

把原来的方法调用改成管道语法：

<input [placeholder]="usernamePlaceholder | translate: mainController.CurrentCulture">

这样一来，只有当usernamePlaceholder本身变化，或者mainController.CurrentCulture切换时，翻译方法才会执行，焦点变化这类无关事件完全不会触发它。

方案2：组件内提前计算翻译结果（配合OnPush） #

如果不想用管道，你可以在login组件内部订阅文化变化，提前把翻译结果计算好存在组件属性里，模板直接绑定属性而非方法。

步骤1：改造MainController的文化状态为响应式 #

首先把CurrentCulture改成可观察对象，这样组件能订阅变化：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MainController {
  private _currentCulture = new BehaviorSubject<string>('en');
  currentCulture$ = this._currentCulture.asObservable();

  get CurrentCulture(): string {
    return this._currentCulture.value;
  }

  set CurrentCulture(culture: string) {
    this._currentCulture.next(culture);
  }
}

步骤2：给login组件加OnPush并订阅文化变化 #

import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { MainController } from './path-to-main-controller';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 开启OnPush
})
export class LoginComponent implements OnInit, OnDestroy {
  usernamePlaceholderText: string;
  private cultureSub: Subscription;

  constructor(
    private mainController: MainController,
    private cd: ChangeDetectorRef // 用于手动触发变更检测
  ) {}

  ngOnInit() {
    // 初始化翻译
    this.updateTranslations(this.mainController.CurrentCulture);
    // 订阅文化变化，更新翻译
    this.cultureSub = this.mainController.currentCulture$.subscribe(culture => {
      this.updateTranslations(culture);
      this.cd.markForCheck(); // OnPush下需要手动标记组件需要检测
    });
  }

  private updateTranslations(culture: string) {
    this.usernamePlaceholderText = this.usernamePlaceholder.GetTranslation(culture);
    // 其他翻译文本也在这里统一更新
  }

  ngOnDestroy() {
    this.cultureSub.unsubscribe();
  }
}

步骤3：模板绑定计算好的属性 #

<input [placeholder]="usernamePlaceholderText">

这种方式下，模板里没有任何方法调用，变更检测时只会检查属性值，完全避免了不必要的翻译方法执行。

方案3：给所有用到翻译的组件统一加OnPush #

如果上面两种方案暂时不想改，至少给login组件加上ChangeDetectionStrategy.OnPush。这样只有当组件的输入属性变化、组件自身触发事件，或者手动调用markForCheck()时，才会触发变更检测，焦点变化这类全局事件就不会再触发login组件的全量更新了。

• 确保LocalizedString的GetTranslation方法本身是轻量的，最好内部做个小缓存（比如用Map存已翻译过的文化-文本映射），避免重复查找字典。
• 如果你的翻译字典很大，可以考虑懒加载对应文化的翻译数据，不要一次性加载所有语言的内容。

内容的提问来源于stack exchange，提问作者Fabio Infante