在 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);
  }
}

我希望在控制台中输出“test”和“test”。

并且来自 ngOnInit() 的 console.log 打印“test”。但是 console.log 来自 constructor() 打印“undefined”。

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

Answer 1

在 Angular 中，组件 class 的 constructor 函数仅用于服务注入。与渲染和 @Input 解析相关的所有内容都必须在 Angular 的 lifecycle hooks 中处理，例如 ngOnInit 和 ngOnChanges

Answer 2

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

更多信息：

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

How to handle undefined when passing data with Input in Angular?

javascript

binding

input

ngoninit

angular