【发布时间】：2019-08-28 04:21:10
【问题描述】：
我有一个 Github 页面，我将链接到该页面，其中包含我的所有代码。所以基本上，我使用 Angular 8 和 NativeScript 来构建我的第一个应用程序。我一直在关注 Udemy 教程并决定拥有一系列组件。一个 Menu 组件，用作我的 Home 路由路径和一系列子路由。 Menu 有一个 TabView，当单击每个选项卡时，它会打开一个不同的组件。现在，我有一个About 组件、一个Store 组件 和一个Join 组件。当每个子组件路由打开时，我希望在单击时将 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 组件的子组件，它是 Home 组件（Main）的子组件。我还尝试将组件放在与 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>
【问题讨论】：
-
你能用最少的示例代码设置一个 Playground 吗？
-
是的，我会这样做并在我这样做时将其发布在此处
标签： ios nativescript angular2-nativescript nativescript-angular