Ionic2 - 不可見的選項卡 - 從可觀察到的

Question

我tabs.ts生成時（simpilified） - 用於將所產生卡口與* ngFor從PHP後端帶到數據：

import ... 

export interface Group { 
     id: number; 
     group: string; 
    }; 

@Component({ 
     template: ` 
    <ion-tabs #myTabs selectedIndex="0"> 
     <ion-tab *ngFor="let tab of userGroups" [root]="page" [rootParams]="tab.id" [tabTitle]="tab.group" tabIcon="pulse"></ion-tab> 
    </ion-tabs> 
    ` 
    }) 

    export class GroupsTabsPage { 
     userGroups: Group[]; 
     page: any = TabStudentsPage; 

     constructor(public app: App, public api: Api, public navParams: NavParams) { 

      this.api.getGroupsList() 
       .subscribe(
       data => { 
        this.userGroups = data; 
       }, 
       err => { 
        this.app.getRootNav().push(LoginPage) 
       } 
       ); 

      // ionViewDidEnter() { 
      // } 

     } 
    } 

結果是不可見的選項卡。 但是當你將鼠標懸停在他們身上時，光標變成'手'，你可以點擊它們。點擊後，整個標籤欄變得可見並且全部按預期工作。

當我使用@ViewChild來引用tabs元素時，有趣的是它的'length'屬性總是0（我在ionViewDidLoad事件中檢查過）。試圖選擇一個選項卡編程也失敗了 - 他們就像鬼;）

而且當你把未來至少一個靜態選項卡* ngFor那些在模板中，所有的* ngFor的人出現，但靜無論您以編程方式選擇或在選項卡元素的selectedIndex屬性中選擇總是被選中。

任何想法的傢伙？我已經浪費了三天..

Answer 1

這是一個已知的bug，看看元素css，子視圖的.tabbar不透明度爲0.我剛剛用不透明度覆蓋了它：1.醜，但作品...

Answer 2

從observable（動態）創建離子選項卡有一些錯誤（重複，錯誤的渲染等）我使用一種解決方法來避免它，它包括每次刪除和加載ion-tabs運行時可觀察到的變化。

父模板：

<div #pluginTabContainer></div> 

父組件：

@ViewChild("pluginTabContainer", {read: ViewContainerRef}) pluginTabContainer:ViewContainerRef; 

...

plugins$.subscribe((pluginTabs:Array<PluginTabType>) => { let componentFactory = this.componentFactoryResolver.resolveComponentFactory(PluginTabContainerComponent); this.pluginTabContainer.clear(); this.pluginTabContainertRef = this.pluginTabContainer.createComponent(componentFactory); this.pluginTabContainertRef.instance.data = pluginTabs; 

...

ngOnDestroy() { this.pluginTabContainertRef.destroy(); } 

加載離子標籤模板：

<ion-tabs> <ion-tab *ngFor="let tab of data" [root]="'PluginTabPage'" [rootParams]="tab"></ion-tab> </ion-tabs> 

加載離子標籤組件（獲得參數）：

@Input() data: PluginTabType; 

希望能對你有所幫助。

Answer 3

我在開發過程中遇到類似的問題，我可以通過設置ngOninit異步並調用超時設置選定的選項卡來解決此問題。

視圖

<ion-tabs #ctrlPanelTabs class="tabs-basic"> 
     <ion-tab *ngFor="let appTab of appTabs" tabTitle={{appTab.name}} [root]="rootPage"></ion-tab> 
    </ion-tabs> 

1）ngOninit是異步

2）this.ctrlPanelTabs。（0）選擇;設置在一個超時函數內

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { NavController, Tabs } from 'ionic-angular'; 
import { AppSettings } from '../../common/app.config'; 
import { AppTab } from '../../models/app-tab'; 
import { AppTabService } from '../../services/app-tab.service'; 
import { PanelTabComponent } from './panel-tab'; 

@Component({ 
    selector: 'page-control-panel', 
    templateUrl: 'control-panel.html', 
    providers: [AppTabService] 
}) 
export class ControlPanelPage implements OnInit { 

    @ViewChild("ctrlPanelTabs") ctrlPanelTabs: Tabs; 

    appTabs: AppTab[] = []; 
    message: string; 
    rootPage = PanelTabComponent; 
    constructor(public navCtrl: NavController, 
     private appTabService: AppTabService) { 

     console.log("Control Panel Page : Constructor called.."); 
    } 

    async ngOnInit() { 
     console.log("Control Panel Page : Entering ngOninit.."); 
     await this.loadAppTabs(); 
     setTimeout(() => { 
      this.ctrlPanelTabs.select(0); 
     }, 100); 
     console.log("Control Panel Page : Exiting ngOninit.."); 
    } 

    async loadAppTabs() { 
     console.log("Control Panel Page : Entering loadAppTabs.."); 
     await this.appTabService.getAppTabsHierarchyBySlaveDeviceId(AppSettings.selSlaveDeviceId) 
      .then((response: any) => { 
       this.appTabs = JSON.parse(response.result); 
       console.log(this.appTabs); 
       console.log("Control Panel Page : Exiting loadAppTabs.."); 
      }); 
    } 

}