OnsenUi-tab切换

1.准备一个父组件testthree和三个子组件

我的目录为：

testthree.component.html:

<ons-tabbar>
  <div class="tabbar__content"></div>
  <div class="tabbar">
    <ons-tab label="Page1" icon="ion-home" [page]="tabone" active></ons-tab>
    <ons-tab label="Page2" icon="ion-ios-browsers" [page]="tabtwo"></ons-tab>
    <ons-tab label="Page3" icon="ion-ios-search" [page]="tabthree"></ons-tab>
  </div>
</ons-tabbar>

1. <div class="tabbar__content"></div>是单个tab内容；
2. 每个<ons-tab></ons-tab>对应一个tab按钮；
3. [page]的值对应每个tab组件。

2. 引入3个子组件，绑定到页面中的[page]

testthree.component.ts:

import { Component, OnInit } from '@angular/core';
import { TaboneComponent } from './tabone/tabone.component';
import { TabtwoComponent } from './tabtwo/tabtwo.component';
import { TabthreeComponent } from './tabthree/tabthree.component';

@Component({
  selector: 'ons-page[testthree]',
  templateUrl: './testthree.component.html',
  styleUrls: ['./testthree.component.css']
})
export class TestthreeComponent implements OnInit {

  //对应页面中的[page]
  tabone = TaboneComponent;
  tabtwo = TabtwoComponent;
  tabthree = TabthreeComponent;

  constructor() {}

  ngOnInit() {}

}

3.ok!

ps:在中添加属性postion="top"可以有itemleft和itemright这种置顶效果

参考官方文档