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