时间戳

首页 > 解决方案 > Nativescript：页面出口路由器不工作

javascript - Nativescript：页面出口路由器不工作

问题描述

我正在构建一个 tabview 并且在控制台或应用程序模拟器中page-outlet-router或router-outlet不显示任何内容并且没有错误，甚至调试 chrome

我正在使用最新的一切 angular/tns/tns-core ( nativescript 6 / angular 8 )

编码：

选项卡模板

<TabView androidTabsPosition="bottom">
    <page-router-outlet *tabItem="{title: 'Players Tab'}" name="homeTab">
    </page-router-outlet>
 </TabView>

标签路由： 

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsComponent,
    children: [
      { path: '', redirectTo: '/(homeTab:home)', pathMatch: 'full' },
      { path: 'home', outlet: 'homeTab', loadChildren: '~/app/pages/home/home.module#HomeModule', component: NSEmptyOutletComponent },
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(homeTab:home)',
    pathMatch: 'full'
  }
]

@NgModule({
  declarations: [TabsComponent],
  imports: [
    NativeScriptCommonModule,
    NativeScriptRouterModule.forChild(routes)
  ],
  schemas: [NO_ERRORS_SCHEMA],
  exports: [NativeScriptRouterModule]
})

主路由：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

@NgModule({
  imports: [NativeScriptRouterModule.forChild(routes)],
  exports: [NativeScriptRouterModule]
})

主页模板

<StackLayout>
    <Button text="home works!" class="btn btn-primary"></Button>
</StackLayout>

标签： javascriptandroidangulartypescriptnativescript

解决方案

我认为您需要做的是将tabs组件选择器名称更改为与 URL 路径不同的名称。例如：“标签页”。此外，用于登录页面的任何其他根组件也应具有与相应路由路径不同的选择器。

此处跟踪问题：https ://github.com/NativeScript/nativescript-angular/issues/1967

推荐阅读