在 Angular 中，UI Router 是一种流行的路由框架，它提供了一种强大的方式来管理应用程序的状态和页面之间的导航。UI Router 可以帮助开发者构建复杂的单页应用程序，同时也可以使代码更加模块化和可维护。
安装和配置
要使用 UI Router，首先需要安装它。可以在终端中使用以下命令来安装 UI Router：
npm install @uirouter/angular
安装完成后，需要进行配置。在 app.module.ts 文件中，需要导入 UIRouterModule 并将其添加到 imports 数组中：
-- -------------------- ---- -------
------ - -------------- - ---- --------------------
-----------
-------- -
------------------------
------- --
--
-
--
------ ----- --------- - -在 UIRouterModule.forRoot() 方法中，需要传递一个对象，其中包含应用程序的状态。状态是应用程序的一部分，它定义了应用程序的不同部分和页面之间的导航。在下一节中，我们将了解如何定义状态。
定义状态
UI Router 的核心是状态。状态是应用程序的不同部分和页面之间的导航。在 Angular 中，可以使用 @uirouter/angular 包中的 StateDeclaration 接口来定义状态。
以下是一个简单的状态定义示例：
import { StateDeclaration } from '@uirouter/angular';
const homeState: StateDeclaration = {
name: 'home',
url: '/home',
component: HomeComponent
};在这个示例中，我们定义了一个名为 home 的状态。该状态的 URL 是 /home，它使用 HomeComponent 组件作为视图。可以将此状态添加到 app.module.ts 文件中的 states 数组中：
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------
----- ---------- ---------------- - -
----- -------
---- --------
---------- -------------
--
-----------
-------- -
------------------------
------- -
---------
-
--
-
--
------ ----- --------- - -现在，当用户导航到 /home URL 时，将会加载 HomeComponent 组件。
嵌套状态
UI Router 还支持嵌套状态。嵌套状态是指一个状态可以包含另一个状态。这对于构建复杂的应用程序非常有用。
以下是一个嵌套状态的示例：
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------
----- --------- ---------------- - -
----- ------
---- -------
---------- -------------
--------- -
-
----- -------
---- --------
---------- -------------
--
-
----- --------
---- ---------
---------- --------------
-
-
--在这个示例中，我们定义了一个名为 app 的状态。该状态使用 AppComponent 组件作为视图，并包含两个嵌套状态：home 和 about。当用户导航到 /app/home URL 时，将会加载 HomeComponent 组件。
路由参数
UI Router 还支持路由参数。路由参数是指在 URL 中传递的参数。可以将路由参数添加到状态的 URL 中。
以下是一个带有路由参数的状态定义示例：
import { StateDeclaration } from '@uirouter/angular';
const userState: StateDeclaration = {
name: 'user',
url: '/user/:id',
component: UserComponent
};在这个示例中，我们定义了一个名为 user 的状态。该状态的 URL 是 /user/:id，其中 :id 是路由参数。可以在 UserComponent 组件中使用 ActivatedRoute 服务来访问路由参数。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -
-------- --- -- -- -------
-
--
------ ----- ------------- -
--- -------
------------------- ------ --------------- -
------- - ---------------------------------------
-
-在这个示例中，我们使用 ActivatedRoute 服务来访问路由参数。在构造函数中，我们使用 route.snapshot.paramMap.get('id') 方法来获取路由参数的值。
总结
UI Router 是 Angular 中一个流行的路由框架，它提供了强大的方式来管理应用程序的状态和页面之间的导航。在本文中，我们介绍了如何安装和配置 UI Router，并详细介绍了如何定义状态、嵌套状态和路由参数。UI Router 可以帮助开发者构建复杂的单页应用程序，同时也可以使代码更加模块化和可维护。
示例代码
完整的示例代码可以在以下代码仓库中找到：
https://github.com/example/angular-ui-router-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657ab003d2f5e1655d51fc1e