简介
NGX-Routable 是一个前端路由管理器，用于实现 Web 应用程序的完整客户端路由系统。它使用 Angular 的路由器，并提供了更好的配置和控制。
安装
要开始使用 NGX-Routable，您需要先安装它。您可以在终端中使用以下命令进行安装：
npm install ngx-routable
如何使用
我们可以通过以下步骤使用 NGX-Routable：
- 首先，我们需要在我们的模块中添加 RoutableModule 。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - -------------- - ---- --------------- ----------- -------- - ------------------------ ------- - - ----- -------- ---------- ------------- -- - ----- --------- ---------- -------------- - - -- - -- ------ ----- --------- - -展开代码
- 添加 <routable-outlet> 到我们的组件中。
<router-outlet></router-outlet>NGX-Routable 的指令和类
RoutableModule
RoutableModule 是一个用于包含路由器配置和将其注入模块的类。它具有一个名为 forRoot 的静态方法，用于接收路由配置。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - -------------- - ---- --------------- ----------- -------- - ------------------------ ------- - - ----- -------- ---------- ------------- -- - ----- --------- ---------- -------------- - - -- - -- ------ ----- --------- - -展开代码
RoutableService
RoutableService 是一个包含 NGX-Routable 将使用的公共服务的类。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - --------------- - ---- --------------- ------------- ------ ----- ----------- ------- --------------- - ------ ---------- - -- --- - -展开代码
RoutableComponent
RoutableComponent 是一个以 programme 方式控制路由的基本类。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------------- - ---- --------------- ------------ --------- - ---- --------------- --- ----------------- ------------ ------- ------- ------------------ -------- ------ - -- ------ ----- --------------- ------- ----------------- - ------ ------- ---- ------ ---------------------- ---- - ----------- - ----------------------------- - ------- ------------- ------- - -- --- - -展开代码
RoutableOutletDirective
RoutableOutletDirective 是一个指令，指定路由组件要显示的区域。
<router-outlet></router-outlet>NGX-Routable 的 API
RoutableService
getRoutes()
getRoutes() 方法返回当前路由，以及路由参数、查询等。您可以使用该方法在组件或服务中获取当前路由。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - --------------- - ---- --------------- ------------- ------ ----- ----------- ------- --------------- - ------ ---------- - ----- - ------ - - ----------------- -- --- - -展开代码
RoutableComponent
go()
go() 方法根据指定的路由参数进行导航。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------------- - ---- --------------- ------------ --------- - ------- -------------------------------------- -- --------------- - -- ------ ----- ------------------- ------- ----------------- - ------ ------------------- - ------------------ - --- - --- - -展开代码
结论
NGX-Routable 是一个非常有用的前端路由管理器，它可以为您的 Web 应用程序提供完整的客户端路由系统。使用该库需要一些学习和实践，但您掌握了 NGX-Routable 后，就可以为您的 Web 应用程序添加更好的配置和控制，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7a81e8991b448d8fe5
