什么是 @adopisowifi/ng-http-error？
@adopisowifi/ng-http-error 是一个 Angular 应用程序的错误提醒库，它使用 Angular 的 HttpClient 拦截错误并在自定义模板中显示错误消息。
安装
npm 包 @adopisowifi/ng-http-error 可以通过以下方式安装：
--- ------- --------------------------
使用方法
Step 1: 引入模块
要使用 @adopisowifi/ng-http-error，请将 NgHttpErrorModule 导入到您的 AppModule 中：
------ - ----------------- - ---- -----------------------------
-----------
-------- -
-- ---
-----------------
--
-- ---
--
------ ----- --------- - -Step 2: 提供错误消息模板
要显示错误消息，您需要提供一个错误消息模板。 在 app.component.html 的主模板中添加以下代码：
---------------------------------
默认情况下，这将在屏幕中心显示一个错误消息。如果您想要自定义模板，您需要使用 ng-template 标记来定义模板。
在此处使用错误消息模板：
------------ -------------------
---- ----------------------
--- -------------------------------
-- -------------------------------------------
------
--------------
--------------- -----------------------------------------------------在上面的示例中，“#httpErrorTemplate”是一个引用到 ng-template 的变量。这个变量可以被传递到 “app-http-error” 组件中，并被用于渲染错误消息。
Step 3: 使用 HttpClient 发送请求
为了让 @adopisowifi/ng-http-error 处理错误消息，您需要在应用程序中使用 HttpClient 发送请求。
在此示例中，我们假设您已在 AppComponent 中注入了 HttpClient，您可以通过以下方式发送请求：
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- ---
--
------ ----- ------------ -
------------------- ----------- ----------- -
---------------
--------------------------------------------------
-----------
------ -- -
-- ------
--
------- -- -
--------------------- -------
-
--
-
-Step 4: 在应用程序中处理错误
现在您已经设置了错误模板并使用 HttpClient 发送了一个 GET 请求。如果该请求失败，@adopisowifi/ng-http-error 将捕获错误并在您的模板中显示错误消息。
您可以将模板中的错误消息设置为其它消息，如服务器错误或授权错误。有关错误消息的详细信息，请参阅 HTTP 状态码：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status。
示例代码
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
------------ -------------------
---- ----------------------
--- -------------------------------
-- -------------------------------------------
------
--------------
--------------- -----------------------------------------------------
--
--
------ ----- ------------ -
------------------- ----------- ----------- -
---------------
--------------------------------------------------
-----------
------ -- -
-------------------- ------
--
------- -- -
--------------------- -------
-
--
-
-总结
使用 @adopisowifi/ng-http-error 可以方便地在您的 Angular 应用程序中显示错误消息。 本文介绍了如何安装和使用 @adopisowifi/ng-http-error，以及如何设置和自定义错误模板。
相信通过本文的学习和实践，您已经掌握了如何使用 @adopisowifi/ng-http-error 来处理 HTTP 请求错误消息。祝愉快编程！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5651ab1864dac66c04