学习了这些概念就能简单的描述一个选项功能的选项卡按钮：
数据：
1.数组：
实例化一个数组的类，如果想要使用这个类中的数据，需要在组件中 使用一个公共属性来暴漏这个类如 heroes=HEROES;
const 数组名HEROES：数组中数据结构=[
]
命令指令
1.*ngFor="let value of arr/json" ==> {{value}}
2.(click)=函数名(参数)
angular的模块 模板语法：https://www.angular.cn/docs/ts/latest/guide/template-syntax.html#!#ngModel
1.表单元素支持双向绑定：FormsModule from '@angular/forms'
在impors入口中添加：FormsModule 模块
使用： <input [(ngModel)]="hero.name" placeholder="name">
在页面中的模块中添加 hero的数据 ，使数据和输入框中 ngModel 产生关联
app.component.ts文件：
import { Component } from '@angular/core';
export class Title{
id:number;
name:string;
}
const TITLE:Title[]=[
{id:1,name:'体育'},
{id:2,name:'艺术'},
{id:3,name:'旅行'}
]
@Component({
selector: 'my-app',
template: `
<section id='div' class="box">
<img src="app/images/01.png" alt="" class="bg_index">
<section id='div1'>
<a href="javascript:;" class="back"></a>
<ul class="clearfix" id="box">
<!--这里面做了三件事，ngFor循环创建li，[ngClass]动态的输出添加类名，(click)在点击的时候输出当前li的id并动态的赋予curId值-->
<li *ngFor="let title of titles" [ngClass]="(curId == this.title.id) ?'active':''" (click)="forActive(this.title.id)">{{title.name}}</li>
</ul>
<img class="poem" src="app/images/02.png" alt="">
</section>
</section>
`,
styles:[`
#div{
width:100%;
height:100%;
}
#div1{
overflow: hidden;
}
.bg_index{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
z-index:-1;
}
.back{
display:block;
width:0.77rem;
height:0.77rem;
background:url("app/images/04.png") no-repeat;
background-size:contain;
margin-top:0.5rem;
margin-left:0.3rem;
}
#box{
padding-left:5%;
margin-top:25%;
width: 100%;
height: 7rem;
}
#box li{
font:bold 0.6rem '微软雅黑';
text-align:center;
height:70%;
margin-top:0.4rem;
width: 30%;
line-height: 1rem;
float:left;
color:rgba(255,255,255,.5);
}
#box .active{
color:rgba(255,255,255,1);
}
.poem{
width:0.85rem;
height:0.85rem;
position:fixed;
bottom:0.35rem;
left:50%;
margin-left:-0.425rem;
}
`]
})
export class AppComponent {
titles=TITLE;
//设置默认选中选项
curId :number =2;
//点击切换选项函数
forActive(n1:number):void{
this.curId = n1;
}
}