离子3中不显示选项卡图标

Question

Inside ./pages/tabs/tabs.html

<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-
circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Settings" tabIcon="cog"></ion-
tab>
</ion-tabs>

Inside ./pages/tabs/tabs.ts

import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import {SettingsPage} from '../settings/settings' ;

@Component({
templateUrl: 'tabs.html'
})
export class TabsPage
{
   tab1Root = HomePage;
   tab2Root = AboutPage;
   tab3Root = SettingsPage;

   constructor() 
   {
   }
}

所以，我无法理解为什么我这里没有显示图标。在此构建之前，之前它正在运行。我什么都没改变。现在它不起作用。

Answer 1

将tabs.html保持为空。

<ion-content padding></ion-content>

在tabs.ts中尝试此操作。

import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import {SettingsPage} from '../settings/settings' ;
import { Platform } from 'ionic-angular';

@Component({
template: `
    <ion-tabs class="tabs-icon-text" [color]="isAndroid ? 'royal' : 'primary'">
    <ion-tab tabIcon="home" tabTitle="Home" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="information-circle" tabTitle="About" [root]="tab2"></ion-tab>
    <ion-tab tabIcon="cog" tabTitle="Settings" [root]="tab3"></ion-tab>
    </ion-tabs>
`})

export class TabsPage {
    tab1 = HomePage;
    tab2 = AboutPage;
    tab3 = SettingsPage;
    isAndroid: boolean = false;

    constructor(platform: Platform) {
        this.isAndroid = platform.is('android');
    }    
}

Answer 2

将其添加到：> scss

  .tabbar{opacity: 1;}