angular6 指令

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

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

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

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

二  使用举例：结构指令

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

 

• 2
  • *ngFor="let hero of heroes">{{hero.name}}

           

     

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

   

 

• 3
  [ngSwitch]="hero?.emotion">

     

     

     

 

 

三 举例 属性指令

html：

 css类绑定
[class.saveable]=" canSave">class的使用
[ngClass]="currentClasses">ngClass的使用


  样式绑定
[style.color]="isSpecial ? 'red': 'green'">style的使用
[ngStyle]="currentStyles">ngClass的使用

ts:

// 内置指令
canSave=true;
isUnchanged=false;
isSpecial=false;
currentClasses =  {
    'saveable': this.canSave,
    'modified': !this.isUnchanged,
    'special':  this.isSpecial
};

currentStyles =  {
    'color':this.canSave   ?  'red':'green',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
};

css:

.saveable{
  color: #fd724f;
}