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

Posted 2023-02-23

【中文标题】在Angular中使用Input传递数据时如何处理未定义？

【英文标题】：How to handle undefined when passing data with Input in Angular?

【发布时间】：2021-08-03 00:50:47

【问题描述】：

使用 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);
  

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

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

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

【参考方案1】：

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

【讨论】：

您的答案是 100% 正确的。只是从文档中添加一些重要的东西。 ngOnChanges() 方法是您访问这些输入属性的第一个机会。 Angular 在 ngOnInit() 之前调用 ngOnChanges()，但之后也调用了很多次。它只调用一次 ngOnInit()。

【参考方案2】：

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

欲了解更多信息：#8015757