时间戳

首页 > 解决方案 > 选项卡 Ionic 4 中的插槽绑定

angular - 选项卡 Ionic 4 中的插槽绑定

问题描述

为什么不能绑定 ion-tab-bar 的 slot 属性？仅当平台是移动的时，我才想将标签栏放在底部，但这不起作用。有什么解决办法吗？

我的 panel.page.html：

<ion-tab-bar [slot]="tabsPlacement">
      <ion-tab-button tab="foo">
        <ion-label>
          Foo
        </ion-label>
      </ion-tab-button>
      <ion-tab-button tab="bar">
        <ion-label>
          Bar
        </ion-label>
      </ion-tab-button>
    </ion-tab-bar>

我的 panel.page.ts 文件：

export class PanelPage implements OnInit {

  tabsPlacement: string = 'bottom';

  constructor(
    public platform: Platform,
  ) {
    if (!this.platform.is('mobile')) {
      this.tabsPlacement = 'top';
    }
  }

  ngOnInit() {
  }

}

此外，问题与平台检测无关。问题的核心与 SLOTS 有关，它们是否可绑定或是否有任何解决方法。

标签： angularionic-frameworkionic4

解决方案

使用平台时要小心，因为 ionic 4 平台中存在一个返回错误值的已知问题。

丑陋的解决方法是：

panel.page.html

<ion-tabs>      
  <ion-tab-bar slot="bottom" *ngIf="!isApp">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>


  <ion-tab-bar slot="top" *ngIf="isApp">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

面板.page.ts

export class PanelPage implements OnInit{
  isApp:any;

  constructor() {
    this.isApp = (!document.URL.startsWith('http') || document.URL.startsWith('http://localhost:8080'));
    console.log(this.isApp);

  }

}

推荐阅读