Angular2 - Starter - Directives

最新推荐文章于 2025-08-21 23:22:44 发布

转载最新推荐文章于 2025-08-21 23:22:44 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wzcblogs/p/6265745.html

文章标签：

#javascript #ui #ViewUI

本文详细介绍了 Angular2 中的 *ngIf、*ngFor 和 [ng-switch] 指令的应用，并通过实例展示了如何使用这些指令来动态地改变视图的呈现方式。此外，还提供了一个自定义指令 devide-age-group 的实现案例，该指令可根据用户的生日划分年龄组并以不同样式展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular2的视图是动态的，在不修改绑定到UI上的源数据的情况下，我们可以通过指令来改变数据的是否呈现，呈现形式，呈现样式。

(1).Angular2提供的最常用的指令是：

1.*ngIf='expression',通过expression的运算结果加载或者写在当前元素.

 <h6 class="bg-success person-info-panel" *ngIf="selectedPerson !== null && utilities.isNotEmptyStr(selectedPerson.name)">
      {{selectedPerson.name}},{{selectedPerson.phone}}
    </h6>

2.*ngFor='expression and declarations' 循环输入的数组，根据每个成员的数据加载渲染模板为视图

<li class="person-info-panel" *ngFor="let person of availablePeople;let i = index">
        <a devide-age-group [birthDay]="person.birthDay" (click)="updateSeletedPerson(person)">
{{person.name}},{{person.email}},{{person.phone | tailNumberLength:5}},{{person.birthDay}}
</a>
      </li>

3.[ng-switch]='expression' 根据expression结果的不同case，加载不同的模板

<div [ng-switch]="conditionExpression">
        <template [ng-switch-when]="case1">case1</template>
        <template [ng-switch-when]="case1">case2</template>
        <template [ng-switch-default]>default</template>
      </div>

(2) 自定义指令，如下我们来自定义一个根据输入的不同的生日来划分年龄段，并以不同的样式呈现用户信息的指令devide-age-group

//age-group.service
import { Injectable } from '@angular/core';

@Injectable()
export class AgeGroupSvc{
  constructor(){}
//该服务根据输入的生日返回不同的年龄组类别
  getAgeByBirth(birthDay:Date){
    let todayYear = (new Date()).getUTCFullYear();
    let birthYear = birthDay.getUTCFullYear();
    let age = todayYear - birthYear;
    return age;
  }

  getAgeGroupByBirth(birthDay:Date){
    let age = this.getAgeByBirth(birthDay);
    if(age < 18){
      return 1;
    }else if(age >= 18 && age < 25){
      return 2;
    }else if(age >= 25 && age < 50){
      return 3;
    }else{
      return 4;
    }
  }
}

import { Directive,SimpleChanges, ElementRef, Renderer,Input,OnChanges,OnInit,DoCheck} from '@angular/core';

import { AgeGroupSvc } from './age'
import set = Reflect.set;
@Directive({
/*
可用的选择器包括
'a[directiveName]';只对a标签且有directiveName属性的元素执行该指令；
'directiveName';对<directiveName></directiveName>这样的元素执行该指令；
'[diractiveName]';对所有具有directiveName属性的元素执行该指令；
*/
  selector: '[devide-age-group]', // 定义css选择器为属性选择
  providers:[
//AgeGroupSvc作为一个服务，需申明为一个提供商
    AgeGroupSvc
  ]
})

export class AgeGroupDevideDiretive implements OnInit{
  ngOnInit(): void {

  }

  element:ElementRef;
  _ageGroupSvc:AgeGroupSvc;
//接收到输入的生日时，通过age-group 服务得到年龄组类别，根据不同的类别为显示用户信息的元素设置不同的样式
  @Input('birthDay') set setBirthDay(birthDay:Date){
    let targetColor = 'white';
    let _birthDay = new Date(birthDay);
    if(_birthDay instanceof Date){
      let ageGroup = this._ageGroupSvc.getAgeGroupByBirth(_birthDay);
      switch(ageGroup){
        case 1:
          targetColor = 'red';
          break;
        case 2:
          this.element.nativeElement.style.color = 'black';
          targetColor = 'yellow';
          break;
        case 3:
          targetColor = 'green';
          break;
        case 4:
          targetColor = 'blue';
          break;
        default:break;
      }
    }

    this.element.nativeElement.style.backgroundColor = targetColor;
  }
  constructor(element: ElementRef, renderer: Renderer, ageGroupSvc:AgeGroupSvc) {
    this.element = element;
    this._ageGroupSvc = ageGroupSvc;
    // `nativeElement` is the direct reference to the DOM element
    element.nativeElement.style.color = 'white';
  }
}
 

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
//在应用module中引入AgeGroupDevideDiretive
    AgeGroupDevideDiretive
]
})

//devide-age-group以属性的方式引入，angular在当前元素的渲染的最后一步就是对该元素执行devide-age-group 指令
<a devide-age-group [birthDay]="person.birthDay" (click)="updateSeletedPerson(person)">
{{person.name}},{{person.email}},{{person.phone | tailNumberLength:5}},{{person.birthDay}}
</a>

转载于:https://www.cnblogs.com/wzcblogs/p/6265745.html