angular - NativeScript:路由器导出不起作用

标签 angular nativescript router-outlet

我关注这个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/

相关文章:

angular - 将生成的 forkJoin 数组传递给 Angular 中的多个组件

Angular : Relative navigation on a named router outlet

ios - iOS 中 View 外内容的 Nativescript 布局不正确

javascript - 在 NativeScript 中使用 Javascript 设置 View 框架

nativescript - 与应用商店订阅 (ios) 接口(interface)

angular - 链接到另一个没有导出的组件

angular - 为什么 <app-root> 在其中渲染另一个 <app-root> ,其中包含我的路由组件?

angular - 羽毛笔 Angular 错误 : NullInjectorError: No provider for InjectionToken config

angular - 如何在 Angular 2 中的两个组件之间传递数据

javascript - 如何获取导航历史?