我关注这个official example在我的应用程序中,显示 <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
导航到新页面而不是将其加载到模式的路由器导出中?
更新:
这似乎是一个错误。请参阅下面我的回答。
最佳答案
我创建了干净的 {N} + Angular 项目并进行了测试。
事实证明应用程序是否使用具有 <page-router-outlet>
的组件进行引导;它忽略任何 <router-outlet>
在(子)页面/组件和 nsRouteLink
内将导航到新页面,而不是在路由器导出中加载目标组件。
没有 <page-router-outlet>
的测试(在根组件中)按预期工作。
我认为这是一个错误,因为我没有看到任何关于必须使用 <page-router-outlet>
之一的通知。或<router-outlet>
在文档中(无论如何都没有任何意义)。
更新:打开 issue here .
更新 2:嵌套路由器( <router-outlet>
和 <page-router-outlet>
在根目录中)应该定义 children
上类。但如果<router-outlet>
处于模式中,它将不起作用(抛出 Error: No provider for ModalDialogParams!
)。这绝对是一个错误,confirmed here .
关于angular - NativeScript:路由器导出不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41337666/