在 Angular 的 `strict` 模式下如何使用 @ViewChild？

Question

在Angular strict mode下，使用@ViewChild的常见方式是什么？

例如，当我按照文档中描述的方法编写用于排序Material表格的代码时。

@ViewChild(MatSort) sort: MatSort;

编译器提示:

错误 TS2564: 属性 'sort' 没有初始化程序并且在构造函数中没有明确定义。

作为可能的解决方案，我可以使用

@ViewChild(MatSort, { static: false }) sort!: MatSort;

... 但对我来说，那更像是一种变通方法。

- A. Sa.

---

你可以将其设置为可选项（即 sort?: MatSort），这样至少在使用之前会检查它是否存在（从而避免错误）。我觉得使用 ? 或 ! 并没有什么问题，但使用 ? 会强制在使用之前对其进行解包，这是有帮助的。 - Chris Gilardi

@ChrisGilardi的建议比使用非空断言操作符（！）更好。ViewChild本质上是对视图的查询，因此您不能保证它不会未定义（或者将来对视图的更改不会使其未定义）。 - Alex

不幸的是，使用 ? 可能会导致未定义而不仅仅是 null，因此我无法将其分配给我的数据源排序。 - A. Sa.

Answer 1

看起来可以正确地删除 { static: false } 部分。因此，一个有效的 sort 声明应该是：

@ViewChild(MatSort) sort!: MatSort;

- A. Sa.

---

{static:true} 的使用仅适用于那些在应用程序中始终可见的“ViewChild”。 - Eliseo