04Angular属性型指令

• 指令的分类

1. 组件（带模板的指令）
2. 结构型指令（改变宿主文档结构）
3. 属性型指令（改变宿主行为）

• 内置指令

结构型指令(改变文档的结构)：ngIf/ngFor/ngSwitch
属性型指令：ngClass/ngStyle/ngModel

<div [ngClass]="{'active':isActive,'disabled':isDisabled}">
<div [ngStyle]="{'property':'value'}" >
<input [(ngModel)]="userName">

• 事件的处理和样式绑定

1. [class.样式类名]="判断表达式"在应用单个class时常用
2. 使用方括号[]是数据绑定，如果带方括号，等号后面就是一个对象或表达式
3. 不使用方括号，等号后面Angular认为是一个字符串，使用{{}}时和方括号等效，通常使用的是[]
4. 圆括号()用于事件绑定，等号后可以接表达式，也可以是一个定义在类中的函数
5. 当使用自定义属性时，需要加attr前缀

<a href="#" [class.active] = 'selectedIdnex === i'
    (click) = "selectedIndex = i" >
    {{menu.title}}
</a>
<button type="button" class="btn" [class.btn-primary]="isPrimary">Primary</button>
//注意：这里的isPrimary只要为真（不等于undefined null 0 false NaN）就生效
<img [attr.data-img]="dataImg" [src]="srcImg" />

当然，有时还会用到绑定多个class的情况

语法：[class]="classExpr"（测试Array的绑定方式不可用），当然还可以用[ngStyle]的方式绑定，但后面可能会被废除

输入类型	范例
string	"class1 class2"
object	{foo: true, bar: false}
Array	["class1", "class2"]

• eg:

let styles = {
    color:"#fff",
    backgroundColor:"c33" //驼峰式命名或background-color亦可
}

<p [style]="styles"></p>

注意：某个类或样式绑定越具体，它的优先级就越高；绑定总是优先于静态属性

• 指令和组件的区别

组件外部的调用者，无法更改组件内部的结构。

指令可以应用于任何一个HTML的标签，可以改变某些行为

• 指令的样式和事件绑定

指令没有模板，要寄宿在一个元素之上-宿主（Host）

1. @HostBinding绑定宿主的属性或样式
2. @HostListener绑定宿主的事件
   组件的样式中也可使用:host这样一个伪类选择器(应用于组件上)

• 事件绑定/单击

通过$event传递事件对象

<p (click)="onClick('str',$event)">事件绑定</p>

• ts

onClick(str:string, event:MouseEvent):void{
    console.log('str+event', str, event.target);
}

• 既然是原生的方法，同样阻止一些冒泡事件

clickChild(event:MouseEvent):void{
    event:stopPropagation();
}

当然，如果只是单纯地阻止一个事件冒泡，没有必要另写了一个方法，可以直接在html的事件绑定中写

<p (click)="$event.stopProgagation();">阻止事件冒泡</p>

• 事件绑定/input

<input type="text" (keyup)="onKeyup($event)"/>

不是所有的元素都有value属性，所以将target转换为输入元素。在非常确定event.target是HTMLInputElement时，通过类型断言告诉TypeScript不再验证。

onInput(event:KeyboardEvent){
    console.log('onInput',(event.target as HTMLInputElement).value)
}

• HostListener装饰器让你订阅某个属性型指令所在的宿主DOM元素的事件

@HostListener('mouseenter',[$event]) onMouseEnter(event){
    console.log('event',event)
    this.highlight('yellow')
}
@HostListener('mouseleave') onMouseLeave(){
    this.highlight('')
}