学习了这些概念就能简单的描述一个选项功能的选项卡按钮:

数据:
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;
}
}
05-27 05:47