Question

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

问题出在我的路由上，还是iOS上的 page-router-outlet 。我有一个iPad和一个Android手机，用于测试设备，直到获得一台新的Mac来设置模拟器为止。当我在 about-tab.component.html 页面上的某个位置使用page-router-outlet时，它在Android上运行良好，并打开了About Details组件。但是在iOS上，什么也没有发生。我单击按钮...什么也没动。

我尝试将page-router-outlet移至about-tab.component.html文件上的不同位置，它完全破坏了iOS上的About标签，并且屏幕空白（并且不显示任何内容，甚至单词都没有），否则它保持不变。我创建了一个GitHub页面...

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

我还试图绕过路线本身的位置。我尝试将About Details组件作为About组件的子代，About组件是Home组件（主）的子代。我还尝试将组件与Home（菜单）组件置于同一级别。

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

NativeScript按钮无法在iOS上使用，但可以在Android上使用

1 个答案: