angular2页面常用标签

一、跳转事件
html：

<div (click)="goPage('prevPage')"></div>   //跳转到上一页
<div (click)="goPage('nextPage')"></div>   //跳转到下一页

ts:

//路径仅供参考,引入跳转到的页面
import {PrevPage} from '../../../prevPage/prevPage';
import {NextPage} from '../../../nextPage/nextPage';


goPage(type) {
	switch(type) {
		case 'prevPage':
			this.navigator.nativeElement.popPage();
		break;
		case 'nextPage':
			this.navigator.nativeElement.pushPage(NextPage, {animation: 'slide',data: {aaa: 'bbb'}});
		break;
		default:
			console.log('Not Founded In The Router');
	}
}

二、跳转事件传参，接收参数
在跳转事件的例子里，我们的跳转函数带了参数，那在接收页面怎么打印出来呢：

this.navigator.nativeElement.pushPage(Index, {animation: 'slide',data: {aaa: 'bbb'}});

angular2有很多钩子函数，我们在constructor函数里接收：
ts：

constructor(private navigator: OnsNavigator,private eventBus: EventServices,
		private httpService: HttpService,
		private settingService: SettingService,
		private _params:Params ) {
			console.log(this._param.data);   //打印出传进来的参数
}

三、数据的双向绑定
html：

<input type="text" id="name" [(ngModel)]="name" />
<p>{{name}}</p>

ts：

public name:String="";

三、数据循环渲染
html：

<div>
	<p *ngFor="let list of lists">{{name}}</p>
</div>

ts：

lists =[
	{
		id:1,
		name:"你好"
	},
	{
		id:2,
		name:"你好"
	}
]

四、if条件判断
html：

//常用来做内容是否显示的控制
<p *ngIf="isBack==true">我回来啦</p>
<p *ngIf="isBack==false">我还没有回来</p>

ts：

isBack:any=false;

我用得最多的就是用它来设置选项卡：
html：

<div class="r-cnt">
	<ul class="r-ul clearfix">
		<li *ngFor="let tab of tabs" (click)="chooseTab(tab.id)" [ngClass]="{'active':tabId==tab.id}">{{tab.name}}</li>
	</ul>
	<div *ngIf="tabId==1">
		你好
	</div>
	<div *ngIf="tabId==2">
		哈哈
	</div>
	<div *ngIf="tabId==3">
		嘻嘻
	</div>
</div>

css：

.r-ul{
	border-bottom: 1px solid #f2f2f2;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.r-ul li{
	padding: 10px 8px;
	text-align: center;
	color: #4a4a4a;
	
}

.r-ul li.active{
	color: #4a90e2;
	border-bottom: 1px solid #4a90e2;
}

.clearfix{
	content: '';
	clear: both;
	display: block;
	overflow: hidden;
}

ts：

tabs = [
	{
		id: 1,
		name: "推荐"
	},
	{
		id: 2,
		name: "最新"
	},
	{
		id: 3,
		name: "热门"
	}
]
	tabId = 1;
	chooseTab(type) {
		this.tabId = type;
	}