在 Angular 中使用 Input 传递数据时如何处理 undefined？

Question

一个通过 Input() 传递值的组件：

<app-available-modal [good]="'test'"></app-available-modal>

该组件如下所示：

@Component({
  selector: 'app-available-modal',
  templateUrl: './available-modal.component.html',
  styleUrls: ['./available-modal.component.scss']
})
export class AvailableModalComponent implements OnInit {
  @Input() good: TyreGoodModelTemp;

  constructor() {
    console.log(this.good);
  }

  ngOnInit(): void {
    console.log(this.good);
  }
}

我希望控制台中有“测试”和“测试” output。

来自 ngOnInit() 的 console.log 打印“test”。 但是constructor() 中的console.log 打印“未定义”。

为什么会发生，我该如何处理？

Answer 1

在 Angular 中，组件 class 的constructor function 仅用于服务注入。 与渲染和@Input解析相关的所有内容都必须在 Angular 的生命周期钩子中处理，例如ngOnInit和ngOnChanges

Answer 2

不要尝试在构造函数中访问@Input()，在 ngOnInit 生命周期钩子中进行。 构造函数几乎与 Angular 应用程序生命周期无关。

欲了解更多信息： #8015757