0

onsenUIとAngularjs2を使用しています。

ons-tabのメソッドのsetActiveTabを使用したいのですが使用方法がわかりません。どのように使うのでしょうか?

コードがこちらです。

@Component({
 selector: 'ons-page',
 template: `
  <ons-tabbar #tabbar>
  <ons-tab [page]="users" label="Users" icon="ion-home" active></ons-tab>
  <ons-tab [page]="offers" label="Offers" icon="ion-chatbox-working"></ons-tab>
  <ons-tab [page]="menu" label="Menu" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>
 `,
 styles: [require('./css/template.css')]   
})
export class TopComponent {
users = UsersComponent;
offers = OffersComponent;
menu = MenuComponent;
offersOpener: boolean = false;
constructor(
private _navigator: OnsNavigator,
private _params: Params,
private zone: NgZone
 ) {
this.zone.run(() => {

});
}
}

1 件の回答 1

1

setActiveTab は ons-tab ではなく ons-tabbar の関数です。
setActiveTab を利用するには、以下のように @ViewChild, ElementRef, nativeElement を使用します。
(1), (2), (3) に着目してください。

import {
  Injectable,
  Component,
  ViewChild,
  ElementRef,
  OnsTab,
  OnsenModule,
  NgModule,
  CUSTOM_ELEMENTS_SCHEMA
} from 'angular2-onsenui';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';


@Injectable()
export class AppService {
  appComponent: AppComponent;
}

@Component({
  selector: 'ons-page',
  template: `
    <ons-toolbar>
      <div class="center">Page</div>
    </ons-toolbar>
    <div class="background"></div>
    <div class="content" id="initial-page">
      <div style="text-align: center; margin: 10px">
        <p>Home</p>

        <ons-button (click)="switchTab()">Switch to next tab</ons-button>
      </div>
    </div>
  `
})
export class HomeComponent {
  constructor(private _service: AppService) {
  }

  switchTab() {
    console.log(this._service);
    // (3) service を使って (1) の ElementRef にアクセスし、
    //     nativeElement プロパティで DOM 要素を取得し、setActiveTab 関数を叩く
    this._service.appComponent.tabbarElementRef.nativeElement.setActiveTab(1);
  }
}

@Component({
  selector: 'ons-page',
  template: `
    <ons-toolbar>
      <div class="center">Page</div>
    </ons-toolbar>
    <div class="background"></div>
    <div class="content" class="normal-page">
      <div style="text-align: center; margin: 10px">
        <p>Page</p>
      </div>
    </div>
  `
})
export class PageComponent {
}

@Component({
  selector: 'app',
  template: `
  <ons-tabbar animation="slide" #tabbar>
    <div class="tab-bar__content"></div>
    <div class="tab-bar">
      <ons-tab label="Page1" icon="ion-home" [page]="home" active></ons-tab>
      <ons-tab label="Page2" icon="ion-help" [page]="page"></ons-tab>
      <ons-tab label="Page3" icon="ion-stop" [page]="page"></ons-tab>
    </div>
  </ons-tabbar>
  `,
  providers: [AppService],
})
export class AppComponent {
  // (1) @ViewChild を使って ons-tabbar 要素の ElementRef を取得する
  @ViewChild('tabbar') tabbarElementRef: ElementRef;

  home = HomeComponent
  page = PageComponent

  constructor(private _service: AppService) {
    // (2) service を使って (1) の ElementRef に別のコンポーネントからもアクセスできるようにする
    this._service.appComponent = this;
  }
}

@NgModule({
  imports: [OnsenModule],
  declarations: [AppComponent, HomeComponent, PageComponent],
  bootstrap: [AppComponent],
  entryComponents: [HomeComponent, PageComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

動作サンプル:
https://plnkr.co/edit/aYKx1EUUsyZKLZvYhwXq?p=preview

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。