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

数据:
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. C#递归例程

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  2. 开源应用框架BitAdminCore:更新日志20180605

    索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/coo ...

  3. JZOJ6096 森林

    题目传送门 Description ​我们定义对一棵树做一次变换的含义为:当以 1 号节点为根时,交换两个互相不为祖先的点的子树: ​一棵树的权值为对它进行至多一次变换能得到的最大直径长度: ​初始时 ...

  4. Linux基础命令(一)

    Linux语法命令 [选项] 参数注意:[]内容是对命令的扩张1.命令中单词之间空格隔开2.单行命令最多256个字符3.大小写区分 clear 清屏pwd 查看当前目录cd 切换目录    .表示当前 ...

  5. C#上传文件处理

    public class FileHelp : System.Web.UI.Page { /// <summary> /// 保存文件 /// 返回:数组:status[0]:文件名称:s ...

  6. mongodb 日志清理

    #!/bin/bash #Rotate the MongoDB logs to prevent a single logfile from consuming too much disk space. ...

  7. guzzle 简单使用记录

    用 guzzle 发送一个包含指定请求头,请求体的 post 请求,并获取指定内容: <?php include_once "guzzle.phar"; use Guzzle ...

  8. php pdo prepare真的安全吗

    详见 这里 Let's say I have code like this: $dbh = new PDO("blahblah"); $stmt = $dbh->prepar ...

  9. Java多线程——对象组合

    我们不希望对每一次的内存访问都进行分析以确保程序是线程安全的,而是希望将一些现有的线程安全组件组合为更大规模的组件或者程序,这里介绍一些组合模式,这些组合模式能够使一个类更容易成为线程安全的,并且在维 ...

  10. Vijos 小胖的奇偶

    第一遍做 #include<iostream> #include<cstdlib> #include<cstdio> #include<cstring> ...