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這種置頂效果

參考官方文件