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を使用したとき、興味深いのは、 'length'プロパティが常に0（ionViewDidLoadイベントをチェックしています）です。タブのいずれかを選択しようとすると、プログラム的にも失敗した - 彼らは幽霊のようなものです;）あなたは少なくとも一つの静的 * ngForテンプレート内のものは、すべて* ngForものが表示されるまで、次のタブが、静的を置く。また

あなたがプログラムで選択したものとタブエレメントのselectedIndexプロパティに関係なく、常に選択されます。

アイデアはありますか？私は3日を無駄にしました。

Answer 1

これは既知のバグです。要素cssを見てください。サブビューの.tabbarは不透明度が0です。不透明度のオーバーライドで固定しました。しかし、動作します...

Answer 2

観測可能な（動的）からいくつかのバグ（重複、間違ったレンダリングなど）を作成する私は避けるために回避策を使用します。観察可能な変化。

親テンプレート：

<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非同期（async）です。選択（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.."); 
      }); 
    } 

}