Layui

angular6 指令

匿名 (未验证) 提交于 2018-07-29 14:27:02

一  在 Angular 中有三种类型的指令:

  1. 组件 — 拥有模板的指令

  2. 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令  如 NgFor 和 NgIf   用法:*ngIf  *ngFor  语法糖*

  3. 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。  NgStyle  和NgSwitch   用法: [NgStyle] [ngClass][ngSwitch]

二  使用举例:结构指令

  • 1 <div *ngIf="hero" class="name">{{hero.name}}</div>

 

  • 2 <ul> <li *ngFor="let hero of heroes">{{hero.name}}</li>

         </ul>

      <div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">

                 ({{i}}) {{hero.name}}

    </div>

 

      <app-happy-hero *ngSwitchCase="'happy'" [hero]="hero"></app-happy-hero>

     <app-sad-hero *ngSwitchCase="'sad'" [hero]="hero"></app-sad-hero>

     <app-unknown-hero *ngSwitchDefault [hero]="hero"></app-unknown-hero>

  </div>

 

三 举例 属性指令

  • ngStyle

基本用法<div [ngStyle]="{'background-color':'green'}"></<div>
判断添加<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

  • ngClass第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类

基本用法 [ngClass]="{'text-success':true}"
判断添加 [ngClass]="{'text-success':username == 'zxc'}"
               [ngClass]="{'text-success':index == 0}"

实例:

const arr = [1, 3, 4, 5, 6]
<ul>
    <li *ngFor="let item of arr, let i = index">
        <span [ngClass]="{'text-danger': i==0}">{{item}}</span>
    </li>
</ul>
 

文章来源: angular6 指令