NativeScript:路由器插座不起作用

时间:2016-12-27 00:39:50

标签: angular nativescript router-outlet

我在我的应用中关注此official example,其中显示<router-outlet>如何在{N}中实施。我的应用程序的唯一区别是我想在模态页面中使用它。但是,它不是模态中的<router-outlet>元素,而是将内容作为新页面加载。

ModalComponent

...
@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导航到新页面而不是加载到模态的路由器插座中?

更新

这似乎是一个错误。请参阅下面的答案。

3 个答案:

答案 0 :(得分:2)

我创建了干净的{N} + Angular项目并进行了测试。 如果应用程序使用具有<page-router-outlet>的组件进行自举,则结果是;它会忽略(子)页面/组件中的任何<router-outlet>,而nsRouteLink导航到新页面,而不是在路由器插座中加载目标组件。

没有<page-router-outlet>的测试(在根组件中)按预期工作。

我认为这是错误,因为我没有看到任何关于必须在文档中使用<page-router-outlet><router-outlet>中的任何一个的通知(wouldn&#无论如何都没有任何意义。)

更新:打开issue here

更新2:嵌套路由器(根目录中<router-outlet> <page-router-outlet>)应定义children才能工作。但如果<router-outlet>处于模态状态,则无法工作(抛出Error: No provider for ModalDialogParams!)。这绝对是一个错误,confirmed here

答案 1 :(得分:0)

{
    path: 'modal',
    component: ModalComponent,
    children: [
        { path: "first", component: FirstComponent },
        { path: "second", component: SecondComponent }
    ]
}

答案 2 :(得分:0)

在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已经消失了。