在 Angular 应用程序中，视图切换是一个常见的操作。例如，当用户单击导航菜单中的链接时，应用程序可能需要从一个视图切换到另一个视图。在本文中，我们将介绍 Angular 应用程序如何处理视图切换的问题。
Angular 路由
Angular 提供了一个名为路由的机制，用于处理视图切换。路由是一个 Angular 模块，它允许开发人员定义应用程序的不同视图，并定义如何在这些视图之间导航。
路由配置
要使用路由，首先需要在应用程序中配置路由。这可以通过创建一个名为 AppRoutingModule 的新模块来完成，如下所示：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - ---------------- - ---- ------------------------------ ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- - ----- ---------- ---------- ---------------- -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
在这个示例中，我们定义了三个路由：一个用于主页，一个用于关于页面，一个用于联系页面。每个路由都由一个路径和一个组件组成。例如，当用户访问应用程序的根路径时，它将被重定向到 HomeComponent。
路由导航
一旦路由被配置，就可以在应用程序中导航到不同的视图。要导航到一个视图，可以使用 Angular 的 Router 服务。例如，在应用程序中的组件中，可以注入 Router 服务并使用它来导航到不同的视图。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
------------------- ------- ------- --
----------------- -
---------------------------------
-
-在这个示例中，我们注入了 Router 服务，并在 navigateToAbout 方法中使用它来导航到 AboutComponent。
路由守卫
除了路由本身之外，Angular 还提供了一种名为路由守卫的机制，用于在导航到一个视图之前执行某些操作。例如，可以使用路由守卫来验证用户是否已登录，以确保他们只能访问受保护的页面。
路由守卫配置
要使用路由守卫，首先需要在应用程序中配置它们。这可以通过创建一个名为 AuthGuard 的新服务来完成，如下所示：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ------ - ---- ------------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------- ------- --
-------------- ------- -
----- ---------- - ----- -- ----- -- ---- -- ------ --
-- ------------- -
---------------------------------
------ ------
-
------ -----
-
-在这个示例中，我们定义了一个名为 AuthGuard 的服务，并实现了 CanActivate 接口。CanActivate 接口定义了一个方法，用于在导航到视图之前执行某些操作。在 AuthGuard 中，我们检查用户是否已登录，并在用户未登录时重定向到登录页面。
路由守卫使用
一旦路由守卫被配置，就可以在应用程序中使用它们。要使用路由守卫，可以将它们添加到路由定义中。例如，要保护 AboutComponent，可以将 AuthGuard 添加到路由定义中，如下所示：
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent, canActivate: [AuthGuard] },
{ path: 'contact', component: ContactComponent },
];在这个示例中，我们将 AuthGuard 添加到 AboutComponent 的路由定义中。这将确保用户只能在已登录的情况下访问 AboutComponent。
总结
在本文中，我们介绍了 Angular 应用程序如何处理视图切换的问题。我们讨论了路由和路由守卫，并提供了示例代码来说明它们的用法。通过使用这些技术，开发人员可以轻松地处理视图切换，并确保用户只能访问他们有权访问的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dc77bb1886fbafa49db3af