angular2学习笔记之ng2标签

发布时间:2019-06-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了angular2学习笔记之ng2标签脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Angular2的内值指令和angular2很类似,所有熟悉angular1的朋友看一眼就会了。angular2-demo
<!-- more -->

angular2学习笔记之ng2标签

一、 效果图

angular2学习笔记之ng2标签

一、指令解读

0. 组件

主要就是定义了一些数据用于测试

import {component} From '@angular/core';

@Component({
    selector: 'ng-tag',
    styles: [require('./NgTag.scss')],
    template: require('NgTag.htML')
})

export class NgTagComponent {
    list:any;
    ngSwITchList:any;
    ngStyleList:any;

    constructor() {
        this.list = [{
                'name': 'xiaomo'
            },{
                'name': 'xiaogang'

            },{
                'name': 'xiaomoxue'
            }];
        this.ngSwitchList=[
            'xiaomo',
            'xiaoming'
        ];
        this.ngStyleList={
            'color':'blue',
            'backgroundColor':'green'
        };
    };
}

1. ngFor

<ul class="list-group" *ngFor="let item of list">
  <li class="list-group-item">{{item.name}}</li>
</ul>

效果图

angular2学习笔记之ng2标签

2. @L_777_5@

我在组件中定义了一个list

this.list = [{
        'name': 'xiaomo'
    },{
        'name': 'xiaogang'

    },{
        'name': 'xiaomoxue'
    }];

我在循环这个数组对象的时候去比对item.name 如果是 xiaomo,就 出现 ngIf中的内容

<ul *ngFor="let item of list">
<li *ngIf="item.name=='xiaomo'" class="list-group-item">哇,我在list列表中找到了 <span class="label label-info">{{item.name}}</span></li>
</ul>

效果图

angular2学习笔记之ng2标签

3. ngSwitch

我在组件中定义了一个方法,可以设置选中的值给myVal

myVal:number = 0;
changeValue($event):void{
    console.LOG($event.target.value);// 输出选中的值设给myVal
    this.myVal = $event.target.value;
}

有一组单选按钮,选中是myVal改变ngSwitch会去循环每个case,如果找到了就显示那条case中的数据,不然显示default中的数据

<div>
    <h2>ngSwitch</h2>
        <input name="myVal" type="radio" title="" value="1" (click)="changeValue($event)">1
        <input name="myVal" type="radio" title="" value="2" (click)="changeValue($event)">2
        <input name="myVal" type="radio" title="" value="3" (click)="changeValue($event)">3
        <input name="myVal" type="radio" title="" value="4" (click)="changeValue($event)">4
        <input name="myVal" type="radio" title="" value="5" (click)="changeValue($event)">5
        <hr>
       <span [ngSwitch]="myVal">
          <span *ngSwitchCase="'1'">ONE</span>
          <span *ngSwitchCase="'2'">TWO</span>
          <span *ngSwitchCase="'3'">THREE</span>
          <span *ngSwitchCase="'4'">FOUR</span>
          <span *ngSwitchCase="'5'">FIVE</span>
          <span *ngSwitchDefault>other</span>
        </span>
</div>

效果图

angular2学习笔记之ng2标签

4. ngStyle

这里的样式的值都是从组件中取出来的,也就意味着它可以动态,不过建议是封装成class,也就是ngClass

<div [ngStyle]="{'background-color': ngStyleList.backgroundColor,'color':ngStyleList.color}" [style.font-size]="30">
      背景 :{{ngStyleList.backgroundColor}} <br/>
      字体颜色: {{ngStyleList.color}}
  </div>

效果图

angular2学习笔记之ng2标签

5. ngClass

左边是class名[要用''包起来],右边是一个true|false表达式

   <button class="BTn" [ngClass]="{'btn-danger': ngStyleList}">测试</button>

效果图

angular2学习笔记之ng2标签

脚本宝典总结

以上是脚本宝典为你收集整理的angular2学习笔记之ng2标签全部内容,希望文章能够帮你解决angular2学习笔记之ng2标签所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
猜你在找的angularjs相关文章
全站导航更多
最新angularjs教程
热门angularjs教程