在 Angular 中，路由是构建单页应用程序的核心功能之一。然而，许多开发者会遇到路由重定向不跳转的问题。解决这个问题所需的方案并不复杂，但是深入理解其原理和实践方法是非常有益的。
问题描述
假设您有一个 Angular 的应用程序，其中有一个登录页面。在登录成功之后，应该跳转到用户的个人信息页面。你使用路由来实现这个跳转功能。
你的代码可能是这样的：
// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
template: `
<form (submit)="login()">
<input type="text" [(ngModel)]="username" name="username"/>
<input type="password" [(ngModel)]="password" name="password"/>
<button type="submit">登录</button>
</form>
`
})
export class LoginComponent {
username: string;
password: string;
constructor(private router: Router) {}
login() {
// 假设这里是调用登录 API 的代码
// ...
// 登录成功后跳转到用户信息页面
this.router.navigate(['/user-info']);
}
}在上面的代码中，当用户点击登录按钮时，应该调用 login() 方法并通过路由导航器（Router）来跳转到用户信息页面。
但是，有时候当您尝试运行这个页面时，它会出现路由重定向不跳转的情况，即当 this.router.navigate(['/user-info']) 被执行时，URL 并没有发生变化，页面也没有跳转。
这种情况可能由许多问题引起，如路由配置错误、路由守卫问题等。但是，一般情况下，它很可能是由于路由导航不是由 Angular 的变更检测机制所触发而导致的。
解决方案
为了解决路由重定向问题，我们需要确保路由导航可以被 Angular 的变更检测机制所识别和触发。
在 Angular 中，变更检测机制是通过 Zone.js 来实现的。每当一些操作被执行后，Angular 会触发变更检测机制来检查这些操作是否导致了视图的变化。而当路由导航不被 Angular 的变更检测机制所识别时，它就无法触发路由跳转。
为了确保路由导航可以被 Angular 的变更检测机制所识别，我们需要将路由导航包装在一个 NgZone 对象中。这样，Angular 就能够在导航完成后进行必要的变更检测。
修改上述代码，将路由导航包装在 NgZone 对象中：
// javascriptcn.com 代码示例
import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
template: `
<form (submit)="login()">
<input type="text" [(ngModel)]="username" name="username"/>
<input type="password" [(ngModel)]="password" name="password"/>
<button type="submit">登录</button>
</form>
`
})
export class LoginComponent {
username: string;
password: string;
constructor(private router: Router, private ngZone: NgZone) {}
login() {
// 假设这里是调用登录 API 的代码
// ...
// 登录成功后跳转到用户信息页面
this.ngZone.run(() => this.router.navigate(['/user-info']));
}
}如上代码所示，我们引入了 NgZone 服务，然后将路由导航代码包裹在 ngZone.run() 方法中。
这样做就能够确保在路由导航完成后触发 Angular 的变更检测机制，从而保证路由跳转能够正常进行。
总结
路由重定向不跳转是 Angular 开发中常见的问题之一。在这篇文章中，我们介绍了如何针对这个问题进行解决。
解决的关键在于确保路由导航代码能够被 Angular 的变更检测机制所识别和触发。包装路由导航代码在 NgZone 中可以实现这个目的。
与其它框架不同的是，Angular 提供了非常完善的路由功能，学习它不仅可以解决路由导航问题，同时能够提高我们的前端技能水平。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65856361d2f5e1655d008338