2

我试图从与模态所在的模块不同的模块中显示一个模态。模态是导航模态，因此我首先加载RootModalComponent具有路由器的模态，<page-router-outlet></page-router-outlet>然后onInit重定向到第一个模态。所有这第一部分都运行良好，但是当我关闭第一个模式时，我收到了这个错误：

CONSOLE ERROR [native code]: ERROR Error: No componentRef found in DetachedRouteHandle

CONSOLE ERROR [native code]: ERROR CONTEXT {
"view": {
"def": {
...
"name": "page-router-outlet",
"attrs": [],
"template": null,
"componentProvider": null,
"componentView": null,
"componentRendererType": null,
"publicP

当我从以下方法调用以下方法时会触发此错误FirstModalComponent：

onClose(): void {
    this.modalParams.closeCallback();
}

最奇怪的是，当我从 关闭模式时SecondModalComponent，一切都很好！

我遵循了Nativescript文档：https ://docs.nativescript.org/ui/modal-view-ng来使用模态视图实现导航，除了我的路由器配置完全不同并且RootModalComponent没有被来自相同的组件调用module。

标记路由.Module.ts

const routes: Routes = [
    { path: 'first-modal', component: FirstModalComponent },
    { path: 'second-modal', component: SecondModalComponent },
];

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

标记.module.ts

@NgModule({
    declarations: [
        FirstModalComponent,
        SecondModalComponent,
        RootModalComponent
    ],
    imports: [
        NativeScriptCommonModule,
        NativeScriptFormsModule,
        MarkersModalRoutingModule
    ],
    schemas: [NO_ERRORS_SCHEMA],
    entryComponents: [
        RootModalComponent
    ]
})
export class MarkersModalModule { }

根模态组件.ts

export class RootModalComponent implements OnInit {

    constructor(
        private router: RouterExtensions,
        private activeRoute: ActivatedRoute
    ) { }

    ngOnInit() {
        this.router.navigate(['first-modal'], { relativeTo: this.activeRoute });
    }

}

根-modal.component.html

<page-router-outlet></page-router-outlet>

有人知道解决方法吗？

4

2 回答 2

1

首先你应该包含ModalDialogService在providers. 此外，我认为您不能懒惰地加载模式对话框路由，它应该是您当前模块的一部分（在您的情况下HomeModule）。您不必导入HomeModule应用程序模块，因为它是从应用程序路由中延迟加载的。

更新游乐场

于 2019-03-31T18:28:12.000 回答
1

目前，我们需要一种解决方法来使其正常工作，因为nativescript angular框架中存在错误（参见issue 1774）。

基本上，解决方法在于命名page-router-outlet内部root-modal.component.html（在下面的示例中，我将其命名为sharedModal）。然后，您可以使用此名称导航到其他模式。

例如：

this.router.navigate([{ outlets: { sharedModal: ["first-modal"] } }], { relativeTo: this.activeRoute });

在这里找到一个完全开发的nativescript playground示例：https ://play.nativescript.org/?template=play-ng&id=TkK7sQ&v=5

于 2019-04-11T07:38:43.547 回答