在开发 Angular 应用程序时，难免会遇到空引用异常。这种异常通常是由于在使用对象或数组时，其值为 null 或 undefined 而引起的。如果不正确处理这些异常，应用程序可能会崩溃或出现不可预测的行为。在本文中，我们将讨论如何在 Angular 应用程序中正确处理空引用异常。
使用可选链操作符
在 ES2020 中，引入了可选链操作符，可以在不引起空引用异常的情况下访问嵌套对象或数组的属性或元素。在 Angular 应用程序中，我们可以使用可选链操作符来访问组件、服务或模板中的属性或元素，如下所示：
// 访问组件属性
this.myProperty?.myNestedProperty?.myValue;
// 访问服务属性
this.myService.myProperty?.myNestedProperty?.myValue;
// 访问模板变量
{{ myVariable?.myNestedProperty?.myValue }}在这些示例中，如果 myProperty、myNestedProperty 或 myValue 的值为 null 或 undefined，则表达式将返回 undefined 而不是引起异常。
使用 nullish 合并操作符
在 ES2020 中，还引入了 nullish 合并操作符，可以在属性或元素的值为 null 或 undefined 时，提供一个默认值。在 Angular 应用程序中，我们可以使用 nullish 合并操作符来提供默认值，如下所示：
// 访问组件属性
const myValue = this.myProperty?.myNestedProperty?.myValue ?? 'default';
// 访问服务属性
const myValue = this.myService.myProperty?.myNestedProperty?.myValue ?? 'default';
// 访问模板变量
{{ myVariable?.myNestedProperty?.myValue ?? 'default' }}在这些示例中，如果 myValue 的值为 null 或 undefined，则使用 'default' 作为默认值。
使用安全导航运算符
在 Angular 中，还有一种特殊的运算符，称为安全导航运算符（?），可以在访问嵌套对象或数组的属性或元素时，避免空引用异常。在使用安全导航运算符时，如果属性或元素的值为 null 或 undefined，则表达式将返回 null，而不是引起异常。在 Angular 应用程序中，我们可以使用安全导航运算符来访问组件、服务或模板中的属性或元素，如下所示：
// 访问组件属性
this.myProperty?.myNestedProperty?.myValue;
// 访问服务属性
this.myService.myProperty?.myNestedProperty?.myValue;
// 访问模板变量
{{ myVariable?.myNestedProperty?.myValue }}在这些示例中，如果 myProperty、myNestedProperty 或 myValue 的值为 null 或 undefined，则表达式将返回 null 而不是引起异常。
使用错误处理器
在某些情况下，即使使用了可选链操作符、nullish 合并操作符或安全导航运算符，仍可能发生空引用异常。在这种情况下，我们可以使用错误处理器来捕获异常并采取适当的措施。在 Angular 应用程序中，我们可以使用 try-catch 块或 RxJS 的 catchError 操作符来捕获异常，如下所示：
-- -------------------- ---- -------
-- -- --------- -
--- -
----- ------- - -------------------------------------------
- ----- ----- -
-------------------
-
-- -- ---- - ---------- ---
------ - ---------- - ---- -----------------
---------------------------------
-------------- -- -
-------------------
------ --------------
--
--在这些示例中，如果发生空引用异常，则异常将被捕获并记录在控制台中，或者使用默认值替换。
结论
在本文中，我们讨论了如何在 Angular 应用程序中正确处理空引用异常。我们介绍了可选链操作符、nullish 合并操作符、安全导航运算符和错误处理器等技术，以帮助我们避免应用程序崩溃或出现不可预测的行为。通过正确处理空引用异常，我们可以提高应用程序的健壮性和可靠性，为用户提供更好的体验。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
---- ----------------------------------------------
-- ------------------------------------- --
------
-
--
------ ----- ----------- -
----------- ----
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675997a37ebdbf91a6d0fe92