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>
<div class="tabbar__content"></div>
是单个tab内容;- 每个
<ons-tab></ons-tab>
对应一个tab按钮;[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() {}
}