资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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`)
    

通过上面的例子,可以看出结构指令和属性指令的区别。结构指令是以 * 作为前缀,这个星号其实是一个语法糖。它是 ngIfngFor 语法的一种简写形式。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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻标题:Angular2属性指令vs结构指令-创新互联
链接分享:http://cdkjz.cn/article/ggggj.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220