Question

为什么无法绑定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是否可绑定或有任何解决方法。

Answer 1

请谨慎使用平台，因为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>

panel.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);

  }

}

标签Ionic 4中的插槽绑定

1 个答案: