Angular 2 - 如何使用新的 Angular 2.0.0-rc.1 路由器

阅读时长 4 分钟读完

Angular 2 的路由器是一个强大的工具,它允许您在不离开应用程序的情况下导航到不同的视图和组件。在 Angular 2.0.0-rc.1 版本中,路由器已经得到了完全重新设计和改进。在本文中,我们将学习如何使用这个新的路由器。

安装路由器

要使用 Angular 2 的路由器,首先需要安装它。可以通过以下命令安装:

配置路由

在 Angular 2 中,路由配置是通过定义一个包含路由信息的数组来完成的。例如:

在这个例子中,我们定义了两个路由:一个是根路由,路径为空,对应的组件是 HomeComponent;另一个是 /about 路由,对应的组件是 AboutComponent

路由参数

路由还可以带有参数。例如,我们可以定义一个带有 id 参数的路由:

在这个例子中,id 是一个参数,可以通过路由来传递。例如,访问 /users/123 将会加载 UserComponent 组件,并将 id 参数设置为 123

子路由

路由还可以嵌套,形成子路由。例如,我们可以定义一个带有子路由的路由:

在这个例子中,ProductsComponent 是父组件,包含了两个子路由:空路由对应的是 ProductListComponent 组件,:id 路由对应的是 ProductDetailComponent 组件。

使用路由

一旦配置了路由,我们就可以在组件中使用它。要导航到一个路由,只需要使用 Router 服务的 navigate 方法。例如:

-- -------------------- ---- -------
------ - ------ - ---- ------------------
------ - --------- - ---- ----------------

------------
  --------- ---------------
  --------- -------- ----------------------- -- ----- --------------
--
------ ----- ----------- -
  ------------------- ------- ------- --

  ---------- -
    ---------------------------------
  -
-

在这个例子中,当用户点击按钮时,会调用 navigate 方法并导航到 /about 路由。

路由参数

如果路由带有参数,我们可以在导航时传递它们。例如:

在这个例子中,我们传递了 id 参数,导航到 /users/123 路由。

结论

Angular 2 的路由器是一个非常强大和灵活的工具,可以帮助我们构建复杂的应用程序。通过本文的学习,您应该已经掌握了如何使用新的 Angular 2.0.0-rc.1 路由器,并能够在自己的项目中使用它。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/26254

纠错
反馈