精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
Angular2属性指令vs结构指令-创新互联
Angular 2 的指令有以下三种：
站在用户的角度思考问题，与客户深入沟通，找到隆子网站设计与隆子网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：
网站制作、成都做网站、企业官网、英文网站、手机端网站、网站推广、空间域名、
虚拟主机、企业邮箱。业务覆盖隆子地区。
组件(Component directive)：用于构建UI组件，继承于 Directive 类
属性指令(Attribute directive): 用于改变组件的外观或行为
结构指令(Structural directive): 用于动态添加或删除DOM元素来改变DOM布局
组件
import { Component } from '@angular/core';
@Component({
selector: 'my-app', // 定义组件在HTML代码中匹配的标签
template: `Hello `name`
`, // 指定组件关联的内联模板
})
export class AppComponent { name = 'Angular'; }Angular 2 内置属性指令
1.ngStyle指令： 用于设定给定 DOM 元素的 style 属性
使用常量
使用变量
具体示例：
import { Component } from '@angular/core';
@Component({
selector: 'ngstyle-example',
template: `
NgStyle
{{ person.name }} (`person`.`country`)
`})
export class NgStyleExampleComponent {
getColor(country: string) {
switch (country) {
case 'CN':
return 'red';
case 'USA':
return 'blue';
case 'UK':
return 'green';
}
}
people: any[] = [
{ name: "Semlinker", country: 'CN' },
{ name: "Donald John Trump", country: 'USA' },
{ name: "Daniel Manson", country: 'UK' }
];
}上面的例子，除了使用 ngStyle 指令，我们还可以使用 [style.] 的语法：
{{ person.name }} (`person`.`country`)
2.ngClass指令：用于动态的设定 DOM 元素的 CSS class
使用常量
使用变量
具体示例：
import { Component } from '@angular/core';
@Component({
selector: 'ngclass-example',
template: `
NgClass
{{ person.name }} (`person`.`country`)
`,
})
export class NgClassExampleComponent {
people: any[] = [
{ name: "Semlinker", country: 'CN' },
{ name: "Donald John Trump", country: 'USA' },
{ name: "Daniel Manson", country: 'UK' }
];
}Angular 2 内置结构指令
1.ngIf指令：根据表达式的值，显示或移除元素
{{ person.name }} (`person`.`country`)
2.ngFor指令：使用可迭代的每个项作为模板的上下文来重复模板，类似于 Ng 1.x 中的 ng-repeat 指令
`person`.`name`
3.ngSwitch指令：它包括两个指令，一个属性指令和一个结构指令。它类似于 JavaScript 中的 switch 语句
{{ person.name }} (`person`.`country`)
{{ person.name }} (`person`.`country`)
{{ person.name }} (`person`.`country`)
通过上面的例子，可以看出结构指令和属性指令的区别。结构指令是以 * 作为前缀，这个星号其实是一个语法糖。它是 ngIf 和 ngFor 语法的一种简写形式。Angular 引擎在解析时会自动转换成
Angular 2 内置结构指令标准形式
1.ngIf指令：
I am the content to show
2.ngFor指令：
{{ person.name }} (`person`.`country`)
3.ngSwitch指令：
{{ person.name }} (`person`.`country`)
{{ person.name }} (`person`.`country`)
{{ person.name }} (`person`.`country`)
Angular 2 内置结构指令定义
1.ngIf指令定义：
@Directive({selector: '[ngIf]'})
export class NgIf {}2.ngFor指令定义：
@Directive({selector: '[ngFor][ngForOf]'})
export class NgForOf implements DoCheck, OnChanges {}3.ngSwitch指令定义：
@Directive({selector: '[ngSwitch]'})
export class NgSwitch {}
@Directive({selector: '[ngSwitchCase]'})
export class NgSwitchCase implements DoCheck {}
@Directive({selector: '[ngSwitchDefault]'})
export class NgSwitchDefault {}自定义属性指令
指令功能描述：该指令用于在用户点击宿主元素时，根据输入的背景颜色，更新宿主元素的背景颜色。宿主元素的默认颜色是×××。
指令实现
import {Directive, Input, ElementRef, HostListener} from "@angular/core";
@Directive({ selector: '[exeBackground]'})
export class BeautifulBackgroundDirective {
private _defaultColor = 'yellow';
private el: 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);
}
private setStyle(color: string) {
this.el.style.backgroundColor = color;
}
}2.指令应用：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `Hello `name``,
})
export class AppComponent {
name = 'Angular';
}自定义结构指令
指令功能描述：该指令实现 ngIf 指令相反的效果，当指令的输入条件为 Falsy 值时，显示DOM元素。
1.指令实现
@Directive({ selector: '[exeUnless]'})
export class UnlessDirective {
@Input('exeUnless')
set condition(newCondition: boolean) {
if (!newCondition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
constructor(private templateRef: TemplateRef,
private viewContainer: ViewContainerRef) { }
}2.指令应用
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `Hello `name``,
})
export class AppComponent {
name = 'Angular';
condition: boolean = false;
}总结
本文主要介绍了 Angular 2 中的属性指令和结构指令，通过具体示例介绍了 Angular 2 常见内建指令的使用方式和区别。最终，我们通过自定义属性指令和自定义结构指令两个示例，展示了如何开发自定义指令。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章标题：Angular2属性指令vs结构指令-创新互联
新闻来源：http://cdkjz.cn/article/ggggj.html
