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

 

转载于:https://www.cnblogs.com/jasonwang2y60/p/6284418.html