常用标签

一、跳转事件

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._params.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;
	}