Question

两天前我问了关于ListView的问题，但现在我发现核心问题不是关于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

我创建了一个本机脚本问题。答案是“添加/删除选项卡视图项目不是官方支持的操作，并且是该小部件的已知限制”。这里是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'}
    ]
},

main-menu-logged-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中-内容消失

2 个答案: