Как исправить 'Не найден componentRef в DetachedRouteHandle' - PullRequest
Новая
       32

Как исправить 'Не найден componentRef в DetachedRouteHandle'

1 голос
/ 30 марта 2019

Я пытаюсь показать модал из компонента, который находится в модуле, отличном от того, в котором находится модал. Модал является модальным для навигации, поэтому я сначала загружаю 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 doc: https://docs.nativescript.org/ui/modal-view-ng для реализации навигации с модальными представлениями, за исключением того, что моя конфигурация маршрутизатора сильно отличается, и RootModalComponent не вызывается компонентом из того же module .

маркеры-routing.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 {}

markers.module.ts 

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

корневой modal.component.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>

Кто-нибудь знает обходной путь?

Ответы [ 2 ]

1 голос
/ 31 марта 2019

Прежде всего, вы должны включить ModalDialogService в providers. Также я не думаю, что вы могли бы загружать модальные диалоговые маршруты лениво, это должно быть частью вашего текущего модуля (в вашем случае HomeModule). Вам не нужно импортировать HomeModule в модуль приложения, поскольку он лениво загружается из маршрутизации приложения.

Обновленная игровая площадка

0 голосов
/ 11 апреля 2019

В настоящее время нам нужен обходной путь, чтобы он заработал, потому что есть ошибка в фреймворке nativescript angular (см. выпуск 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

...