2

1.Angular4指令分类

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

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组件里的属性和方法;
    clipboard.png

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>

何凯
966 声望174 粉丝

Never too late to learn!


引用和评论

0 条评论