Angular组件中displayName变更时如何同步更新email变量？

这个问题我太熟了！你现在的写法里，email属性只在组件初始化的时候赋值一次，之后不管displayName怎么变，这个值都不会自动重新计算。下面给你几个实用的解决方案，按需选择：

方案1：使用Getter（最简洁推荐） #

把email改成一个getter方法，这样每次模板访问它的时候都会重新计算值，完美适配你的场景：

// component.ts
displayName: string;

// 用getter替代直接赋值，同时处理空值情况
get email(): string {
  return this.displayName ? `user+${this.displayName}@domain.com` : '';
}

模板不需要任何修改，[value]="email"会自动在displayName变化时重新获取最新值：

<input type="text" [(ngModel)]="displayName" name="displayName">
<input type="email" [value]="email" name="email">

方案2：监听ngModel变化（适合需要额外逻辑的场景） #

如果需要在displayName变化时执行一些额外操作（比如邮箱格式验证、触发API请求），可以直接在模板里监听ngModelChange事件：

<!-- component.html -->
<input type="text" [(ngModel)]="displayName" name="displayName" (ngModelChange)="updateEmail($event)">
<input type="email" [value]="email" name="email">

// component.ts
displayName: string;
email: string;

updateEmail(newDisplayName: string): void {
  this.email = `user+${newDisplayName}@domain.com`;
  // 这里可以加额外逻辑，比如：
  // this.validateEmailFormat(this.email);
  // this.syncEmailToServer(this.email);
}

方案3：使用ngOnChanges（仅适用于@Input属性） #

注意！这个方法只在displayName是父组件传入的@Input()属性时有效，如果是组件内部的属性，ngOnChanges不会触发。写法如下：

// component.ts
import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';

@Input() displayName: string;
email: string;

ngOnChanges(changes: SimpleChanges): void {
  // 检查displayName是否有变化，且当前值不为空
  if (changes['displayName'] && changes['displayName'].currentValue) {
    this.email = `user+${this.displayName}@domain.com`;
  }
}

不推荐的方案：EventEmitter #

EventEmitter一般用于子组件向父组件传递事件，你的场景是组件内部属性联动，用它完全没必要，反而会增加代码复杂度，所以直接pass就行。

内容的提问来源于stack exchange，提问作者Maurice Wipf