angular2自学笔记，三---ng2选项卡

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

数据：

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  class="box">
        <img src="app/images/01.png" alt="" class="bg_index">
     <section >
        <a href="javascript:;" class="back"></a>
          <ul class="clearfix" >
                        <!--这里面做了三件事，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;
  }
}