angular 指令

Angular 指令的不同类型如下：

• 组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。
• 属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。
• 结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。由于结构型指令会在 DOM 中添加和删除节点，因此每个元素只能应用一个结构型指令。

内置指令

内置属性型指令：

常见的内置属性型指令	作用
NgClass	添加和删除一组 CSS 类
NgStyle	添加和删除一组 HTML 样式
NgModel	将数据双向绑定添加到 HTML 表单元素

ngClass添加和删除类

• 可用表达式
• 可用对象，key值为class名，value值为布尔类型

//使用表达式
<div [ngClass]="'svg-notification-' + type">11</div>
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>

//使用对象
<div [ngClass]="{'status-flag-process': data.controlStatus === 1, 'status-flag-success': data.controlStatus === 2}">22</div>
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>

this.currentClasses =  {
      saveable: true,
      modified: false,
      special:  true
    };         

ngStyle设置内联样式

使用对象，key值为style名，value是三元表达式返回对应的样式值

//使用对象
<div [ngStyle]="{'padding-right': data?.flag === 2 ? '8px' : '0','width': type === 'blank' ? '100%' : 'calc(100% - 50px)'}">11</div>
<div [ngStyle]="currentStyles">22</div>


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

ngModel显示和更新属性

使用 ngModel 指令显示数据属性，并在用户进行更改时更新该属性。

1. 使用ngModel需要导入FormsModule（从 FormsModule 中导入 ngModel 指令），并将其添加到 NgModule 的 imports 列表中

//src/app/app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
    FormsModule
 ]
 })
 export class AppModule { }

2. 在 HTML 的 <form> 元素上添加 [(ngModel)] 绑定，并将其设置为等于此属性，这里是 name。
   [(ngModel)] 语法只能设置数据绑定属性

 <input [(ngModel)]="currentItem.name" id="example-n