Angular4指令(Directive)

发布时间:2019-06-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Angular4指令(Directive)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1.Angular4指令分类

  • 组件(component directive):UI组件,继承于Directive
  • 属性指令(Attribute directive):改变组件的样式;
  • 结构指令(Structural directive):改变@L_360_1@布局;

2.组件(Component directive)

  • 代码实例

    import { Component } from '@angular/core';
    
    @Component({
    selector: 'app-root', // 定义组件在HTML代码中匹配的标签
    template: `<h1>Hello {{World}}</h1>`, // 指定组件关联的内联模板
    })
    export class AppComponent  {
    name = 'World'; 
    }
  • 组件的组成:@Component()里里里面的Template(HTML,CSS);以及export class组件里的属性和方法;

    Angular4指令(Directive)

3.属性指令(Attribute directive) :主要改变组件的样式

  • 主要包括ngStylengClass

    //ngStyle
    <ul *ngFor="let person of people">
        <li [style.color]="getColor(person.country)">
           {{ person.name }} ({{person.country}})
        </li>
    </ul>
    //ngClass
    <div [ngClass]="{'text-success': person.country === 'CN'}"></div>

4.结构指令(Structural directive) :主要改变DOM的结构

  • 主要包括ngIfngForngSwitch

    //ngIf
    <div *ngIf="person.country === 'CN'">{{ person.name }} ({{person.country}})</div>
    //ngFor
    <div *ngFor="let person of people">{{person.name}}</div>
    //ngSwitch
    <ul [ngSwitch]='person.name'>
    <li *ngSwitchCase="Lily" class='text-success'>
        {{ person.age}}
    </li>
     <li *ngSwitchCase="'Tom'" class='text-secondary'>
        {{ person.age}} 
    </li>
    <li *ngSwitchDefault class='text-Primary'>
      {{ person.age}} 
    </li>
    </ul>

脚本宝典总结

以上是脚本宝典为你收集整理的Angular4指令(Directive)全部内容,希望文章能够帮你解决Angular4指令(Directive)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。