Angular 2 属性指令 vs 结构指令

2024-12-03 技术教程

Angular 2 的指令有以下三种：

组件(Component directive)：用于构建UI组件，继承于 Directive 类

属性指令(Attribute directive): 用于改变组件的外观或行为

结构指令(Structural directive): 用于动态添加或删除DOM元素来改变DOM布局

组件

import{Component}from'@angular/core';@Component({selector:'my-app',//定义组件在HTML代码中匹配的标签template:`<h2>Hello`name`</h2>`,//指定组件关联的内联模板})exportclassAppComponent{name='Angular';}

Angular 2 内置属性指令

1.ngStyle指令：用于设定给定 DOM 元素的 style 属性

使用常量

<div[ngStyle]="{'background-color':'green'}"></div>

使用变量

<div[ngStyle]="{'background-color':person.country==='UK'?'green':'red'}">

具体示例：

import{Component}from'@angular/core';@Component({selector:'ngstyle-example',template:`<h5>NgStyle</h5><ul*ngFor="letpersonofpeople"><li[ngStyle]="{'color':getColor(person.country)}">{{person.name}}(`person`.`country`)</li></ul>`})exportclassNgStyleExampleComponent{getColor(country:string){switch(country){case'CN':return'red';case'USA':return'blue';case'UK':return'green';}}people:any[]=[{name:"Semlinker",country:'CN'},{name:"DonaldJohnTrump",country:'USA'},{name:"DanielManson",country:'UK'}];}

上面的例子，除了使用 ngStyle 指令，我们还可以使用 [style.<property>] 的语法：

<ul*ngFor="letpersonofpeople"><li[style.color]="getColor(person.country)">{{person.name}}(`person`.`country`)</li></ul>

2.ngClass指令：用于动态的设定 DOM 元素的 CSS class

使用常量

<div[ngClass]="{'text-success':true}"></div>

使用变量

<div[ngClass]="{'text-success':person.country==='CN'}"></div>

具体示例：

import{Component}from'@angular/core';@Component({selector:'ngclass-example',template:`<style>.text-success{color:green}.text-primary{color:red}.text-secondary{color:blue}</style><h5>NgClass</h5><ul*ngFor="letpersonofpeople"><li[ngClass]="{'text-success':person.country==='UK','text-primary':person.country==='CN','text-secondary':person.country==='USA'}">{{person.name}}(`person`.`country`)</li></ul>`,})exportclassNgClassExampleComponent{people:any[]=[{name:"Semlinker",country:'CN'},{name:"DonaldJohnTrump",country:'USA'},{name:"DanielManson",country:'UK'}];}

Angular 2 内置结构指令

1.ngIf指令：根据表达式的值，显示或移除元素

<div*ngIf="person.country==='CN'">{{person.name}}(`person`.`country`)</div>

2.ngFor指令：使用可迭代的每个项作为模板的上下文来重复模板，类似于 Ng 1.x 中的 ng-repeat 指令

<div*ngFor="letpersonofpeople">`person`.`name`</div>

3.ngSwitch指令：它包括两个指令，一个属性指令和一个结构指令。它类似于 JavaScript 中的 switch 语句

<ul[ngSwitch]='person.country'><li*ngSwitchCase="'UK'"class='text-success'>{{person.name}}(`person`.`country`)</li><li*ngSwitchCase="'USA'"class='text-secondary'>{{person.name}}(`person`.`country`)</li><li*ngSwitchDefaultclass='text-primary'>{{person.name}}(`person`.`country`)</li></ul>

通过上面的例子，可以看出结构指令和属性指令的区别。结构指令是以 * 作为前缀，这个星号其实是一个语法糖。它是 ngIf 和 ngFor 语法的一种简写形式。Angular 引擎在解析时会自动转换成 <template> 标准语法。

Angular 2 内置结构指令标准形式

1.ngIf指令：

<template[ngIf]='condition'><p>Iamthecontenttoshow</p></template>

2.ngFor指令：

<templatengFor[ngForOf]="people"let-person><div>{{person.name}}(`person`.`country`)</div></template>

3.ngSwitch指令：

<ul[ngSwitch]='person.country'><template[ngSwitchCase]="'UK'"><liclass='text-success'>{{person.name}}(`person`.`country`)</li></template><template[ngSwitchCase]="'USA'"><liclass='text-secondary'>{{person.name}}(`person`.`country`)</li></template><template[ngSwitchDefault]><liclass='text-primary'>{{person.name}}(`person`.`country`)</li></template></ul>

Angular 2 内置结构指令定义

1.ngIf指令定义：

@Directive({selector:'[ngIf]'})exportclassNgIf{}

2.ngFor指令定义：

@Directive({selector:'[ngFor][ngForOf]'})exportclassNgForOf<T>implementsDoCheck,OnChanges{}

3.ngSwitch指令定义：

@Directive({selector:'[ngSwitch]'})exportclassNgSwitch{}@Directive({selector:'[ngSwitchCase]'})exportclassNgSwitchCaseimplementsDoCheck{}@Directive({selector:'[ngSwitchDefault]'})exportclassNgSwitchDefault{}

自定义属性指令

指令功能描述：该指令用于在用户点击宿主元素时，根据输入的背景颜色，更新宿主元素的背景颜色。宿主元素的默认颜色是×××。

指令实现

import{Directive,Input,ElementRef,HostListener}from"@angular/core";@Directive({selector:'[exeBackground]'})exportclassBeautifulBackgroundDirective{private_defaultColor='yellow';privateel:HTMLElement;@Input('exeBackground')backgroundColor:string;constructor(el:ElementRef){this.el=el.nativeElement;this.setStyle(this._defaultColor);}@HostListener('click')onClick(){this.setStyle(this.backgroundColor||this._defaultColor);}privatesetStyle(color:string){this.el.style.backgroundColor=color;}}

2.指令应用：

import{Component}from'@angular/core';@Component({selector:'my-app',template:`<h2[exeBackground]="'red'">Hello`name`</h2>`,})exportclassAppComponent{name='Angular';}

自定义结构指令

指令功能描述：该指令实现 ngIf 指令相反的效果，当指令的输入条件为 Falsy 值时，显示DOM元素。

1.指令实现

@Directive({selector:'[exeUnless]'})exportclassUnlessDirective{@Input('exeUnless')setcondition(newCondition:boolean){if(!newCondition){this.viewContainer.createEmbeddedView(this.templateRef);}else{this.viewContainer.clear();}}constructor(privatetemplateRef:TemplateRef<any>,privateviewContainer:ViewContainerRef){}}

2.指令应用

import{Component}from'@angular/core';@Component({selector:'my-app',template:`<h2[exeBackground]="'red'"*exeUnless="condition">Hello`name`</h2>`,})exportclassAppComponent{name='Angular';condition:boolean=false;}

总结

本文主要介绍了 Angular 2 中的属性指令和结构指令，通过具体示例介绍了 Angular 2 常见内建指令的使用方式和区别。最终，我们通过自定义属性指令和自定义结构指令两个示例，展示了如何开发自定义指令。