Question

我正在尝试从位于与模态所在模块不同的模块中的组件中显示模态。该模式是导航模式，因此我首先加载具有路由器RootModalComponent的{{1}}，然后将<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文档：https://docs.nativescript.org/ui/modal-view-ng以使用模式视图实现导航，除了我的路由器配置完全不同并且Nativescript未被相同组件调用RootModalComponent。

markers-routing.Module.ts

module

markers.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 {}

root-modal.component.ts

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

root-modal.component.html

export class RootModalComponent implements OnInit {

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

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

}

有人知道解决方法吗？

Answer 1

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

Updated Playground

Answer 2

当前，由于page-router-outlet框架中存在一个错误（请参见issue 1774），我们需要一种变通方法来使其工作。

基本上，解决方法是在root-modal.component.html内命名sharedModal（在下面的示例中，我将其命名为this.router.navigate([{ outlets: { sharedModal: ["first-modal"] } }], { relativeTo: this.activeRoute });）。然后，您可以使用该名称导航到其他模态。

例如：

nativescript playground

在此处找到完整开发的<ui-select multiple ng-model="meas.daysSelected" theme="bootstrap" close-on-select="false"> <ui-select-match placeholder="days">{{$item}}</ui-select-match> <ui-select-choices repeat="day in days | filter:$select.search"> <div ng-bind-html="day | highlight: $select.search"></div> </ui-select-choices> </ui-select> $scop.days = ['Sun', 'Mon', 'Tue' ... ]示例：https://play.nativescript.org/?template=play-ng&id=TkK7sQ&v=5

如何修复“在DetachedRouteHandle中找不到componentRef”

2 个答案: