NativeScript: роутер-выход не работает

Я использую этот официальный пример в своем приложении. который показывает, как <router-outlet> реализован в {N}. Единственное отличие моего приложения в том, что я хочу использовать его на модальной странице. Но вместо элемента <router-outlet> в модальном окне он загружает контент как новые страницы.

Модальный компонент

...
@Component({
    selector: "modal",
    template: `
        <StackLayout>
            <StackLayout>
                <Button text="First" [nsRouterLink]="['/first']"></Button>
                <Button text="Second" [nsRouterLink]="['/second']"></Button>
            </StackLayout>

            <router-outlet></router-outlet>
        </StackLayout>
    `
})
export class ModalComponent {
    constructor(private page:Page, public params:ModalDialogParams) {
        // ..
    }
}

app.routing.ts

...
export const routes:Routes = [
    { path: "", redirectTo: "home", pathMatch: "full" },
    { path: "home", component: HomeComponent },
    { path: "modal", component: ModalComponent },
    { path: "first", component: FirstComponent },
    { path: "second", component: SecondComponent }
];

export const dynamicComponents = [
    ModalComponent,
    FirstComponent,
    SecondComponent
];
...

app.module.ts

...
@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(routes)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        ...dynamicComponents
    ],
    entryComponents: [
        ...dynamicComponents
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Есть идеи, почему /first и /second переходят на новую страницу вместо того, чтобы загружать модальное окно в router-outlet?

ОБНОВЛЕНИЕ:

Кажется, это ошибка. Смотрите мой ответ ниже.

nativescript angular router-outlet

Onur Yıldırım 27.12.2016 источник

comment

Я не использую NativeScriptRouterModule, но делаю то же самое, используя RouterModule из @angular/router, и все работает нормально. - saurav1405 27.12.2016

Ответы (2)

arrow_upward
2
arrow_downward

Я создал чистые проекты {N} + Angular и провел тесты. Оказывается, если приложение загружается с компонентом, имеющим <page-router-outlet>; он игнорирует любые <router-outlet> внутри (под)страницы/компонента, а nsRouteLink будет переходить на новую страницу вместо загрузки целевого компонента в router-outlet.

Тесты без <page-router-outlet> (в корневом компоненте) работали как положено.

Я думаю, что это ошибка, так как я не вижу никаких указаний на необходимость использования <page-router-outlet> или <router-outlet> в документации (в любом случае это не имеет никакого смысла).

ОБНОВЛЕНИЕ: открыл проблему здесь.

ОБНОВЛЕНИЕ 2: Вложенные маршрутизаторы (<router-outlet> с <page-router-outlet> в корне) должны определить children для работы. Но если <router-outlet> находится в модальном режиме, это не сработает (выдает Error: No provider for ModalDialogParams!). Это определенно ошибка, подтверждено здесь.

Onur Yıldırım 29.12.2016

arrow_upward
0
arrow_downward

В файле app.module.ts внесите следующие изменения, чтобы сделать это без NativeScriptRouterModule:

  import { RouterModule } from '@angular/router';  

@NgModule({
imports: [...,RouterModule.forRoot(routes)],
declarations: [
        AppComponent,
        HomeComponent,
        ...dynamicComponents
    ],
    entryComponents: [
        ...dynamicComponents
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Когда вы закроете модальное окно, вы также должны вернуться к модальному маршруту, потому что активированный маршрут будет /first или /second, и вы хотите, чтобы активированный маршрут был /modal после того, как модальное окно исчезнет.

saurav1405 27.12.2016