Angular中@Input属性的初始化方法及解决‘属性未初始化即被使用’报错问题

嗨，这个问题我之前也碰到过，其实核心原因很好理解：Angular的@Input属性是在组件生命周期的ngOnInit阶段才会被父组件传入值的，而你在类的属性声明里直接写public tags: Array<string> = [...this.todo.tags];，这时候组件还没完成初始化，todo还处于未赋值的状态，TypeScript的严格类型检查自然就会抛出"property is used before initialization"的错误。

下面给你几个实用的解决方案，你可以根据自己的业务场景选择：

方案1：利用ngOnInit钩子初始化 #

这是最常规的做法，因为ngOnInit会在组件接收完所有输入属性后执行，此时todo已经有父组件传入的值了，操作起来安全又可靠：

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  @Input() todo: ITodos;
  public tags: Array<string> = [];

  ngOnInit(): void {
    // 这里todo已经被父组件传入，可以放心操作
    this.tags = [...this.todo.tags];
  }
}

方案2：给@Input属性设置默认值 #

如果你的ITodos类型允许，你可以给todo一个默认的空对象，这样即使父组件没传值，todo.tags也不会是undefined：

@Input() todo: ITodos = { tags: [] } as ITodos; // 给todo默认值，确保tags存在
public tags: Array<string> = [...this.todo.tags];

要是不想给整个todo设默认值，也可以用可选链+空值合并来兜底：

@Input() todo?: ITodos; // 标记todo为可选属性
public tags: Array<string> = [...(this.todo?.tags || [])];

方案3：用@Input的setter监听变化 #

如果父组件可能会动态更新todo的值，那用setter就最合适了——每次todo变化时，tags都会自动同步更新：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  private _todo: ITodos;
  public tags: Array<string> = [];

  @Input() set todo(value: ITodos) {
    this._todo = value;
    // 每次todo更新时，重新复制tags数组
    this.tags = value ? [...value.tags] : [];
  }

  get todo(): ITodos {
    return this._todo;
  }
}

简单总结一下：如果只是一次性初始化，选方案1；如果要避免todo为undefined，选方案2；如果todo会动态变化，选方案3就准没错啦～

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