Nativescript 将选项卡动态添加到 TabView - 内容消失

Question

我两天前问过关于的问题，但现在我发现核心问题不是关于 listview，而是问题在 TabView 中。在创建选项卡的开始时，一切看起来都很好，但是当我点击添加另一个选项卡的按钮时，它无法正常工作。添加选项卡（在末尾）并且选项卡的选定索引为 2 但前一个选项卡的内容（选项卡索引 1）消失了。但是当我转到最后一个选项卡（索引 3）并返回选项卡（索引 1）时，内容就在那里。

这是您可以尝试的代码片段：

Home.component.ts

import { Component, OnInit, NgZone } from "@angular/core";
import { Page } from "tns-core-modules/ui/page/page";
import { ListView } from "ui/list-view"

@Component({
    selector: "app-home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    site = [{ "name": "cau 1", }, { "name": "cau 2" },
    { "name": "settings" }];

    tabSelectedIndex = 0;
    onItemTap(args) {
        this.ngZone.run(() => {
            this.site.push({ "name": "next" });
            this.tabSelectedIndex = 2;
        });
    }

    constructor(private ngZone: NgZone, private page: Page) {
    }

    ngOnInit(): void {
    }
    onTabChanged(args) {
        console.log("ahoj");
    }
}

Home.component.html

<ActionBar title="YOUR APP"></ActionBar>
<GridLayout class="page">
    <TabView [(ngModel)]="tabSelectedIndex" height="100%" (selectedIndexChange)="onTabChanged($event)" class="content p-20">
        <ng-template ngFor let-item [ngForOf]="site">
            <StackLayout *tabItem="{title: item.name}">

                <Label row="0" col="0" [text]="test"></Label>
                <Button text="+" class="btn btn-active tmp" (tap)="onItemTap($event)"> </Button>
            </StackLayout>
        </ng-template>
    </TabView>
</GridLayout>

仅在 android 模拟器上测试。

附加问题：可以先添加新选项卡（到索引 0）吗？

非常感谢您的宝贵时间和任何答复。

编辑：您可以尝试此代码here

或者更好的样本是 here

Answer 1

我创建了一个 nativescript 问题。答案是“adding/removing 选项卡视图项不是官方支持的操作，并且是该小部件的已知限制。”这是 link 的问题。

Answer 2

我遇到了同样的问题。我搜索了很多如何处理这个用例。我找到了一个解决方案，我认为这非常好。您需要有 2 个（或更多）TabViewComponents。而不是通过 route.navigate 导航到您想要的组件。

例子

app-routing.module.ts

{
    path: 'main-menu-club-logged-out', component: MainMenuClubLoggedOutComponent,
    children: [
        {path: 'home', component: HomeComponent, outlet: 'home'},
        {path: 'find-club', component: FindClubComponent, outlet: 'findClub'},
        {path: 'check-in', component: CheckInComponent, outlet: 'checkIn'},
        {path: 'settings', component: SettingsComponent, outlet: 'settings'}
    ]
},
{
    path: 'main-menu-club-logged-in', component: MainMenuClubLoggedInComponent,
    children: [
        {path: 'home', component: HomeComponent, outlet: 'home'},
        {path: 'club-information', component: ClubInformationComponent, outlet: 'clubInformation'},
        {path: 'check-out', component: CheckOutComponent, outlet: 'checkOut'},
        {path: 'settings', component: SettingsComponent, outlet: 'settings'}
    ]
},

主菜单记录-in.component.html

<BottomNavigation selectedIndex="0" tabsPosition="bottom">

<TabStrip>
    <TabStripItem class="tab-view">
        <Label text="Home"></Label>
        <Image src="font://&#xf2bd;" class="fas t-36"></Image>
    </TabStripItem>
    <TabStripItem class="tab-view">
        <Label text="Club"></Label>
        <Image src="font://&#xf3c5;" class="fas t-36"></Image>
    </TabStripItem>
    <TabStripItem class="tab-view">
        <Label text="Check-Out"></Label>
        <Image src="font://&#xf057;" class="far t-36"></Image>
    </TabStripItem>
    <TabStripItem class="tab-view">
        <Label text="Settings"></Label>
        <Image src="font://&#xf1de;" class="fas t-36"></Image>
    </TabStripItem>
</TabStrip>

<TabContentItem>
    <GridLayout>
        <page-router-outlet name="home"></page-router-outlet>
    </GridLayout>
</TabContentItem>
<TabContentItem>
    <GridLayout>
        <page-router-outlet name="clubInformation"></page-router-outlet>
    </GridLayout>
</TabContentItem>
<TabContentItem>
    <GridLayout>
        <page-router-outlet name="checkOut"></page-router-outlet>
    </GridLayout>
</TabContentItem>
<TabContentItem>
    <GridLayout>
        <page-router-outlet name="settings"></page-router-outlet>
    </GridLayout>
</TabContentItem>

component.ts

logoutClub() {
    this.clubService.logoutOfCurrentClub();

    this.router.navigate(['/main-menu-club-logged-in'], {
        clearHistory: true, transition: {name: 'fade'}
    });
}

Nativescript 将选项卡动态添加到 TabView - 内容消失

Nativescript add tab into TabView dynamically - content disappears

typescript

nativescript

angular2-nativescript

nativescript-angular

angular