import { Component } from '@angular/core';

@Component({  
    selector: 'my-app', // 定义组件在HTML代码中匹配的标签  
    template: `
Hello `name`
`,  // 指定组件关联的内联模板
})
export class AppComponent  {  name = 'Angular'; }

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' }    
     ];
}

      
     
         {{ person.name }} (`person`.`country`)
     

具体示例：

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 引擎在解析时会自动转换成

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 {}

自定义属性指令

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

1. 指令实现

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许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。