ios - NativeScript 按钮在 iOS 上不工作，但在 Android 上工作

Question

我有一个 Github 页面，我将链接到该页面，其中包含我的所有代码。基本上，我使用 Angular 8 和 NativeScript 来构建我的第一个应用程序。我一直在关注 Udemy 教程并决定拥有一系列组件。一个菜单组件，用作我的主路由路径和一系列子路由。菜单有一个 TabView，当单击每个选项卡时，它会打开一个不同的组件。现在，我有一个关于组件、一个商店组件和一个加入组件。当每个子组件路由打开时，我希望将一个按钮附加到每个子路由，单击时路由到另一个页面。因此，“关于”组件上的一个按钮可通往“关于详细信息”组件，该组件仅包含有关公司的文本。

问题要么出在我的路由上，要么出在 iOS 上的 page-router-outlet 上。我有一台 iPad 和一部 Android 手机，用来测试一些东西，直到我得到一台新的 Mac 来设置模拟器。当我在 about-tab.component.html 页面上的某个位置使用 page-router-outlet 时，它在 Android 上运行良好并打开“关于详细信息”组件。但在 iOS 上，什么也没有发生。我点击按钮...但什么也没动。

我尝试将 page-router-outlet 移动到 about-tab.component.html 文件上的不同位置，它要么完全破坏了 iOS 上的“关于”选项卡，并且屏幕为空白(并且不显示任何内容，甚至连单词都没有)，或者保持不变。我创建了一个 GitHub 页面...

https://github.com/eoscryptodev/Best-Laces-Out

我还尝试过移动路线本身的位置。我尝试将“关于详细信息”组件作为“关于组件”的子组件，而“关于组件”又是“主页”组件(主组件)的子组件。我还尝试将该组件放在与主页(菜单)组件相同的级别。

app-routing.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptCommonModule } from 'nativescript-angular/common';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { Routes } from '@angular/router';
import { MenuComponent } from './menu/menu.component';
import { AboutComponent } from './menu/about/about.component';
import { ShopComponent } from './menu/shop/shop.component';
import { JoinComponent } from './menu/join/join.component';
import { AboutDetailsComponent } from './menu/about-details/about-details.component';
//import { BottomTabComponent } from './tabs/bottom-tab/bottom-tab.component';
//import { JoinPageComponent } from './pages/join-page/join-page.component';


//FIX: You want the path to go from OurHistory(the menu option) to OutHistoryPage. Also figure out how to add the menu to the bottom of the pages. 
//     Maybe create an ns-path for the BottomTabBar that can be placed on HTML pages.

const routes: Routes = 
[
  { path: '', redirectTo: '/home/(HistoryOutlet:OurHistory//MerchOutlet:OurMerch//ClubOutlet:OurClub)', pathMatch: 'full' },
  { path: 'home', component: MenuComponent, children:
  [
    { path: 'OurHistory', component: AboutComponent, outlet: 'HistoryOutlet'},
    { path: 'HistoryDetails', component: AboutDetailsComponent, outlet: 'HistoryOutlet' },
    { path: 'OurMerch', component: ShopComponent, outlet: 'MerchOutlet' },
    { path: 'OurClub', component: JoinComponent, outlet: 'ClubOutlet' },

  ]}, // a root route with an empty path. The route that is loaded when our app starts. SHOULD BE LOGO IMAGE!!

]

about-tab.component.html

<ScrollView orientation="vertical" height="500">
    <StackLayout orientation="vertical" backgroundColor="white">
        <page-router-outlet name="HistoryOutlet"></page-router-outlet>
        <Label text="This is Our History" id="ID1"></Label>
        <Button height="50" 
                width="200" 
                backgroundColor="black" 
                text="Who We Are" 
                id="about-button"
                [nsRouterLink]="['/home', { outlets: { HistoryOutlet:[ 'HistoryDetails' ]}} ]">
        </Button>
    </StackLayout>
</ScrollView>

about-details.component.html

<ns-action-bar title="Details"></ns-action-bar>
<StackLayout>
    <Button 
      text="Go Back"
      [nsRouterLink]="['/home', { outlets: { HistoryOutlet: ['OurHistory'] } } ]"
      class="about-details">
    </Button>
</StackLayout>

Answer 1

我在 NativeScript Github 文档中找到了我的解决方案。在 TabView 导航下。我知道我哪里错了。我很接近，但这回答了一切。

https://github.com/NativeScript/docs/blob/6ac877dc3bd551a8e338855e07597ee24358a462/docs/core-concepts/angular-navigation.md