隐藏 Nativescript-Angular TabView 上的选项卡按钮答案

【问题标题】：Hide tab buttons on Nativescript-Angular TabView隐藏 Nativescript-Angular TabView 上的选项卡按钮
【发布时间】：2018-12-01 12:44:32
【问题描述】：

我正在尝试找到一种方法来使用 Angular 6 应用程序删除元素上的选项卡按钮，但到目前为止无济于事。基本上，我只想保留 Tab 内容及其滑动功能。

显然您可以使用特定的 android 和 iOS 方法，但我不确定该怎么做。

<TabView [(ngModel)]="tabSelectedIndex" (selectedIndexChanged)="onSelectedIndexChanged($event)" (loaded)="tabViewLoaded($event)">
    <ng-container *ngFor="let article of articles" #tabView>
        <StackLayout *tabItem="{title: article.id}">
            <StackLayout>
                <NewsDetails></NewsDetails>
            </StackLayout>
        </StackLayout>
    </ng-container>
</TabView>

在我的 .ts 文件中，我可以找到对元素的引用，如下所示：

@ViewChild("tabView") tabView: ElementRef;

ngAfterViewInit() {
    console.dir(this.tabView.nativeElement);
}

但我不知道从现在开始该做什么。有任何想法吗？以前所有关于此的问题都没有奏效。

这是一个示例游乐场链接：https://play.nativescript.org/?template=play-ng&id=iK9ZTM

【问题讨论】：

标签： nativescript tabview nativescript-angular

【解决方案1】：

将下面的代码与 TabView 的加载事件一起使用。

onTabViewLoaded(event: EventData) {
   const tabView = <TabView>event.object;
   if (isIOS) {
     tabView.viewController.tabBar.hidden = true;
   }
   if (isAndroid) {
     const tabLayout = tabView.nativeViewProtected.tabLayout;
     tabLayout.getLayoutParams().height = 0;
     tabLayout.requestLayout();
   }
}

我最近为我在Uplabs 发布的一个示例工作做了这个

【讨论】：

谢谢！它完美地工作。此外，这是一款外观精美的应用！
嗨 Manoj。 EventData 来自哪里？ onTabViewLoaded(event: EventData)
来自加载的事件 ($event)。