angular - 未在 ngOnInit 中设置变量

Question

在 ngOnInit 中，当我这样做时：

console.log(this.tournament.slug);

我明白了。比赛为空

此变量来自父视图：

@Input() tournament: Tournament;

锦标赛是查询的结果，因此获取值需要一些时间，因此 ngOnInit 不起作用。

我应该怎么做才能避免这个错误？

Answer 1

如果没有立即设置，也许您可​​以在输入上使用设置器来响应父组件何时尝试设置它？

    @Input()
    set tournament(val) {
        this._tournament = val;
        console.log(this._tournament.slug);
    }

Answer 2

在这些情况下，您应该使用ngOnChanges()Angular 的生命周期挂钩。

像这样的东西：

ngOnChanges() {
  if(this.tournament) {
    console.log(this.tournament.slug);
  }
}

这是ngOnChanges()钩子的一个基本实现，所以如果你必须管理一个复杂的情况（例如几个输入异步来，并且被重复更新，并且你需要单独控制每个输入），请访问官方文档。

在这种情况下查看此链接：https ://angular.io/guide/lifecycle-hooks#onchanges

---

编辑：正如我在这个视频中看到的，它看起来非常准确，ngOnChanges()在处理多个属性时首选钩子，@Input()而在处理一个@Input()属性时首选 setter 选项。 https://youtu.be/BYwfrSlJFfY?t=711