在开发 Web 应用程序时，经常需要根据用户的行为进行重定向，以便他们到达正确的页面。在 Angular 2 中，可以使用 Router 模块来管理路由，但是如何在组件内部实现重定向呢？本文将介绍如何在 Angular 2 组件内部实现重定向。
使用 Router 实现重定向
首先，让我们看一下如何在 app.component.ts 中使用 Router 对象实现重定向。我们可以在 ngOnInit() 方法中使用 Router.navigate() 方法来导航到其他路由：
------ - ---------- ------ - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- -----------
--------- ---------------------------------
--
------ ----- ------------ ---------- ------ -
------------------- ------- ------- - -
---------- -
--------------------------------
-
-在上面的代码中，我们在 AppComponent 的 ngOnInit() 方法中使用 Router.navigate() 导航到 /home 路由。
但是，如果我们想要在组件内部实现重定向，该怎么办呢？
在组件内部实现重定向
在组件内部实现重定向的方法有很多种，下面我们将介绍其中两种常用的方法：
方法一：使用 Router 对象
我们可以在组件类中注入 Router 对象，并在需要重定向的地方使用 Router.navigate() 方法来导航到其他路由。例如，以下代码演示了如何在组件内部实现重定向：
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- --------------
--------- -----------------------
--
------ ----- ---------------- -
------------------- ------- ------- -
--------------------------------
-
-在上面的代码中，我们在 ExampleComponent 的构造函数中使用 Router.navigate() 导航到 /home 路由。
方法二：使用 RouterLink
另一种方法是使用 RouterLink 指令来实现重定向。我们可以在 HTML 模板中使用 RouterLink 来创建一个链接，并在点击时触发导航。例如，以下代码演示了如何在组件内部实现重定向：
------ --- ---- --- ---- -- ----- ---- --------- -- -------------------------- ------- ------------------------------
在上面的代码中，我们使用 RouterLink 创建了一个指向 /home 路由的链接。当用户点击该链接时，Angular 会自动导航到该路由。
结论
在本文中，我们介绍了如何在 Angular 2 组件内部实现重定向。我们可以使用 Router 对象或 RouterLink 指令来实现重定向。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25368