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

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

angular2自学笔记(三)---ng2选项卡的更多相关文章

  1. angular2自学笔记---官网项目(一)

    1.单向数据绑定的'插值表达式' angular中最典型的数据显示方式:把HTML模板(template)的控件绑定到angular组件的属性(component相当于一个构造函数,下面例子中的这个构 ...

  2. angular2自学笔记(二)---路由、服务等八大主要构造块

    angular的思想:总是把数据访问工作委托给一个支持性服务类. Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布 ...

  3. webpack4 自学笔记三(提取公用代码)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...

  4. 【C++初学者自学笔记三】哑元函数、缺省参数、内联函数(模块二,PS:需要用到重载函数)

    一,哑元函数:一个函数的参数只有类型没有名字的则这个参数称之为哑元.类似于void fun(int); 功能:1保持向前的兼容性,比方说我们需要做成一个成品,然后成品是会不断的更新第一代第二代,当我们 ...

  5. vue 自学笔记(三) 计算属性与侦听器

    一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...

  6. vue 自学笔记记录

    vue 自学笔记(一): 知识内容:  安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...

  7. 《Linux内核设计与实现》课本第三章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第三章自学笔记 进程管理 By20135203齐岳 进程 进程:处于执行期的程序.包括代码段和打开的文件.挂起的信号.内核内部数据.处理器状态一个或多个具有 ...

  8. python自学笔记

    python自学笔记 python自学笔记 1.输出 2.输入 3.零碎 4.数据结构 4.1 list 类比于java中的数组 4.2 tuple 元祖 5.条件判断和循环 5.1 条件判断 5.2 ...

  9. ssh自学笔记

    Ssh自学笔记 Ssh简介 传统的网络服务程序,如:ftp.pop和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令和数据.而且,这些服务 ...

随机推荐

  1. cesium编程中级(二)源码编译

    cesium编程中级(二)源码编译 有些情况下,比如我们自己从Github下载了最新的代码,或者自己临时修改了一点代码,想要编译后的Build文件夹的内容,需要自行编译源码,这里介绍一下编译的方法 下 ...

  2. ASP.NET Core根据环境切换NLog配置

    1.新建NLog配置文件,名称分别为nlog.config和nlog.debug.config <?xml version="1.0"?> <nlog xmlns ...

  3. git删除未监视的文件

    新增的文件使用git status查看会提示Untracked files,如果想要删除Untracked files,可以使用如下命令: git clean -f # 删除Untracked fil ...

  4. 【Oracle 12c】最新CUUG OCP-071考试题库(60题)

    60.(16-10) choose the best answer: Evaluate the following SQL commands: SQL>CREATE SEQUENCE ord_s ...

  5. html中设置data-*属性值 并在js中进行获取属性值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. webshell在php方向的研究(精华篇)

    文章主旨:准备学习c语言,你喜欢的所有干货在文末附件里 作者宗旨:没有不想当将军的兵,没有不想提高技术的person,今天带你打开php的研究之路. 本文作者:Laimooc(原名xoanHn),个人 ...

  7. Substr函数助你免杀php脚本

    主要利用substr函数和url编解码 本文作者:i春秋签约作家Laimooc 1]安全狗: 新研究的php脚本木马:最新版安全狗扫描如下: 成功看到:扫描已完成,未发现网页木马以及其他威胁(开心吗, ...

  8. django入门-初窥门径-part1

    尊重作者的劳动,转载请注明作者及原文地址 http://www.cnblogs.com/txwsqk/p/6510917.html 完全翻译自官方文档 https://docs.djangoproje ...

  9. [Swift实际操作]八、实用进阶-(1)Swift语言中的两种单例模式实际操作

    本文降温你解析常见的单例模式.单例模式可以保证一个类仅有一个实例,同时这个类还必须提供一个访问该类的全局访问点. 首先导入需要使用到的界面工具框架 import UIKit 单例对象保证了只有一个实例 ...

  10. linux中文件句柄数问题

        问题描述:  有时候业务比较繁忙时,就会出现如下问题 too many open files:顾名思义即打开过多文件数.不过这里的files不单是文件的意思,也包括打开的通讯链接(比如sock ...