2

我在我的应用程序中遵循这个官方示例，它显示了如何<router-outlet>在 {N} 中实现 a。我的应用程序的唯一区别是我想在模式页面中使用它。但它不是<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导航到新页面而不是将其加载到模式的路由器出口中吗？

更新：

这似乎是一个错误。请看下面我的回答。

4

3 回答 3

2

我创建了干净的 {N} + Angular 项目并进行了测试。结果证明应用程序是否使用具有<page-router-outlet>;的组件进行引导。它忽略<router-outlet>（子）页面/组件中的任何内容，nsRouteLink并将导航到新页面，而不是在路由器插座中加载目标组件。

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

我认为这是一个错误，因为我没有看到任何关于必须使用文档<page-router-outlet>或<router-outlet>文档中的任何一个的通知（无论如何都没有任何意义）。

更新：在这里打开了一个问题。

更新 2：嵌套路由器（<router-outlet>在<page-router-outlet>根目录中）应该定义children为工作。但是，如果<router-outlet>在模态中，它将不起作用（抛出Error: No provider for ModalDialogParams!）。这绝对是一个错误，在此处确认。

于 2016-12-29T01:22:47.167 回答
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 {}

当您关闭模态时，您还应该导航回模态路线，因为激活的路线将是/firstor/second并且您希望激活的路线/modal在模态消失之后。

于 2016-12-27T05:18:29.287 回答
0 
{
    path: 'modal',
    component: ModalComponent,
    children: [
        { path: "first", component: FirstComponent },
        { path: "second", component: SecondComponent }
    ]
}
于 2016-12-27T01:40:36.537 回答