如何修复跨模块模态框关闭时的“No componentRef found in DetachedRouteHandle”错误

我之前也碰到过类似的问题，这个错误通常是因为初始跳转的模态路由组件没有被正确挂载到路由栈的DetachedRouteHandle中导致的。你的场景里，RootModalComponent在OnInit同步跳转到FirstModalComponent，此时组件还没完成完整的初始化流程，路由系统还没来得及把FirstModalComponent的componentRef存入DetachedRouteHandle，所以调用closeCallback时会报错。而SecondModalComponent是通过正常路由导航过去的，路由栈状态是完整的，所以关闭正常。

下面给你两个可行的解决方法：

方法一：修改路由配置，设置默认子路由（推荐） #

把RootModalComponent作为父路由，将first-modal设为默认子路由，让路由系统自动处理初始跳转，避免手动同步导航的问题。

修改markers-routing.Module.ts的路由配置：

const routes: Routes = [
  { 
    path: '', 
    component: RootModalComponent,
    children: [
      { path: '', redirectTo: 'first-modal', pathMatch: 'full' }, // 默认跳转到first-modal
      { path: 'first-modal', component: FirstModalComponent },
      { path: 'second-modal', component: SecondModalComponent },
    ]
  },
];

@NgModule({
  imports: [NativeScriptRouterModule.forChild(routes)],
  exports: [NativeScriptRouterModule]
})
export class MarkersModalRoutingModule {}

然后删除root-modal.component.ts里ngOnInit的手动导航代码：

export class RootModalComponent implements OnInit {
  constructor(
    private router: RouterExtensions,
    private activeRoute: ActivatedRoute
  ) { }
  
  ngOnInit() {
    // 移除这里的navigate调用，路由会自动跳转
  }
}

这种方式让路由系统管理整个栈的状态，能确保FirstModalComponent的componentRef被正确记录，关闭模态框时就不会报错了。

方法二：延迟初始导航，确保组件初始化完成 #

如果不想修改路由结构，可以在RootModalComponent里延迟执行导航，让组件先完成初始化流程，再触发路由跳转：

修改root-modal.component.ts的ngOnInit：

export class RootModalComponent implements OnInit {
  constructor(
    private router: RouterExtensions,
    private activeRoute: ActivatedRoute
  ) { }
  
  ngOnInit() {
    // 用setTimeout把导航放到下一个事件循环，确保组件挂载完成
    setTimeout(() => {
      this.router.navigate(['first-modal'], { relativeTo: this.activeRoute });
    }, 0);
  }
}

setTimeout(..., 0)会让导航操作在当前组件初始化完成后再执行，此时路由系统能正确捕获FirstModalComponent的componentRef，关闭模态框时就不会出现找不到的错误了。

你可以先试试第一种方法，这是更符合NativeScript路由规范的做法，也能避免类似的路由状态问题。

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