31419


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

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

コードがこちらです。

[code]

    @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(() => {
    
    });
    }
    }
    
[/code]


CC BY-SA 3.0
2016-12-26T17:08:03.307
31416
2016-12-26T18:06:35.103
20026
question
onsen-ui angularjs
Angular2×OnsenUI2 ons-tabのsetActiveTabの使い方


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

[code]

    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);
    
[/code]

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


CC BY-SA 3.0
2016-12-26T18:06:35.103
31419
2016-12-26T18:06:35.103
20027
31416
answer