NativeScript Angular如何导航至上一个组件？附路由结构说明

嘿，针对你的NativeScript Angular项目场景（懒加载的Login/Start和Main页面），我整理了几种靠谱的返回上一页的方法，你可以根据实际需求选择：

1. 使用Location服务的back()方法 #

这是最通用的方案，它模拟了浏览器的后退行为，会直接回到导航栈中的上一个页面，不管你的路由是懒加载还是常规配置都能生效。

实现步骤： #

• 首先在组件中导入Location服务：

import { Location } from "@angular/common";

• 在组件构造函数中注入该服务：

constructor(private location: Location) { }

• 在需要触发返回的方法（比如按钮点击事件）中调用back()：

goBack() {
  this.location.back();
}

2. 使用NativeScript Router的navigateBack()方法 #

NativeScript对Angular的Router做了扩展，提供了专门的navigateBack()方法，同样是基于导航栈来返回上一页，用法也很简单：

实现步骤： #

• 导入NativeScript的Router服务：

import { Router } from "@angular/router";

• 构造函数注入：

constructor(private router: Router) { }

• 调用返回方法：

goBack() {
  this.router.navigateBack();
}

如果是从子路由返回，还可以结合ActivatedRoute指定相对路径：

import { ActivatedRoute } from "@angular/router";

constructor(private router: Router, private route: ActivatedRoute) { }

goBack() {
  this.router.navigateBack([], { relativeTo: this.route });
}

3. 手动导航到目标路由（当导航栈不可靠时） #

如果用户是直接通过URL访问到某个页面（比如直接输入/main），这时候导航栈中没有上一页的记录，你可以手动指定要返回的路由：

示例代码： #

import { Router } from "@angular/router";

constructor(private router: Router) { }

goBackToLogin() {
  this.router.navigate(["/start"]);
}

这种方式适合你明确知道要返回的目标页面，而不是依赖历史导航栈的场景。

内容的提问来源于stack exchange，提问作者Aaron Ullal