Angular 4中无需OnInit用@Input值初始化变量及解决undefined问题

这个问题本质是Angular组件初始化顺序导致的——当你直接在类里给condition赋值时，组件实例刚被创建，Angular还没完成@Input()属性的绑定，所以this.id自然是undefined。不用ngOnInit的话，有个非常优雅的解决方案，就是利用@Input的setter来同步更新你的condition变量。

方案：使用@Input的Setter方法 #

通过给id定义一个setter，每次id被赋值（包括初始化和后续变更）时，自动同步更新condition的值，代码如下：

export class TestComponent {
  private _id: string;
  condition: boolean = false; // 先给个默认初始值

  @Input()
  set id(value: string) {
    this._id = value;
    // 每次id更新时，重新计算condition的状态
    this.condition = this._id === 'myid';
  }

  // 保留getter，方便组件内部随时获取id的当前值
  get id(): string {
    return this._id;
  }
}

为什么这个方案可行？ #

• Angular在组件实例创建完成后，会调用@Input属性的setter完成赋值，所以初始化阶段就能正确拿到id的值并计算condition
• 后续如果父组件传递的id发生变化，setter会再次触发，自动更新condition，这比ngOnInit只执行一次的逻辑更灵活
• 完全不需要依赖任何生命周期钩子，完美匹配你的需求

额外补充 #

如果你的场景只需要在初始化时计算一次condition，也可以考虑ngOnChanges钩子，但它会在所有输入属性变化时触发，相比之下setter的方式更精准，只针对id的变化做出响应。

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