Angular NativeScript懒加载模块内路由跳转失败问题求助

你的问题核心在于使用routerExtensions.navigate时没有正确指定Tab对应的路由出口（outlet），也没有匹配懒加载模块内的路由层级。下面是具体的问题分析和解决方法：

问题原因 #

你当前的组件位于searchTab这个路由出口下的懒加载SearchModule中，而routerExtensions.navigate默认不会自动继承当前的路由出口上下文，所以直接写["details/"]或者错误的outlet写法都会导致路由匹配失败。而nsRouterLink能正常工作是因为它会自动关联当前组件所在的路由出口上下文，帮你处理了路径解析。

正确的导航写法 #

这里提供两种可靠的写法：

方法1：相对路径（推荐，适合同级组件跳转） #

首先在组件中注入ActivatedRoute，然后基于当前路由节点做相对导航：

// 先在组件构造函数注入ActivatedRoute
constructor(private routerExtensions: RouterExtensions, private route: ActivatedRoute) {}

showItem() {
  // 用../details跳转到同级的details路由
  this.routerExtensions.navigate(['../details'], { relativeTo: this.route });
}

这种写法的好处是不需要硬编码路由出口名称，完全基于当前路由上下文，更灵活。

方法2：绝对路径（明确指定路由出口） #

如果想使用绝对路径，需要明确指定searchTab这个出口，并完整写出路由层级：

showItem() {
  this.routerExtensions.navigate([
    { outlets: { searchTab: ['search/details'] } }
  ]);
}

这里的search/details对应父路由中searchTab绑定的search路径，加上子路由的details。

为什么你的之前写法错误 #

• this.routerExtensions.navigate(["details/"])：没有指定路由出口，router不知道要在哪个tab的outlet中导航，导致找不到匹配的路由。
• this.routerExtensions.navigate(["details", { outlets: { searchTab: ['details'] } }])：语法错误，outlets应该放在导航的第二个参数（配置对象）里，而不是路径数组中。

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