Angular 指令 · Jolylai

Angular指令可分为三种：属性指令、结构指令、组件。
内置指令：通用指令、路由指令、表单指令。

自定义属性指令

import { Directive, ElementRef } from '@angular/core'
@Directive({
  selector: '[myBeautifulBackground]'
})
export class BeautifulBackgroundDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.background = 'beige'
  }
}

引入Directive 和 ElementRef
[myBeautifulBackground] 是指令对应的CSS选择器，中括号在CSS中表示元素属性匹配，不能丢。
ElementRef为DOM元素
在declarations中声明

绑定输入

import { Directive, ElementRef, Input } from '@angular/core'
@Directive({
  selector: '[myBeautifulBackground]'
})
export class BeautifulBackgroundDirective {
  private _defaultColor: string = "pink"
  private el: HTMLElement
  constructor(el: ElementRef) {
    this.el = el.nativeElement
    this.setStyle(this._defaultColor)
  }
  @Input('myBeautifulBackground') set backgroundColor(colorName: string) {
    this.setStyle(colorName)
  }
  private setStyle(color: string) {
    this.el.style.backgroundColor = color
  }
}

使用 <div myBeautifulBackground [myBeautifulBackground]=’red’ / >
[myBeautifulBackground]=’red’ 会执行Input的方法且在constructor之后，所有会覆盖默认颜色
Input中的set方法

响应用户操作

@HostListener('click')
onClick() {
  this.setStyle(this.backgroundColor || this._defaultColor)
}

自定义结构指令

import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core'
@Directive({ selector: '[myUnless]' })
export class UnlessDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }
  @Input('myUnless')
  set condition(newCondition: boolean) {
    if (!newCondition) {
      this.viewContainer.createEmbeddedView(this.templateRef)
    } else {
      this.viewContainer.clear()
    }
  }
}

TemplateRef访问组件的模板
ViewContainerRef作为视图渲染器将模板内容插入至DOM中
viewContainer.createEmbeddedView() 和 viewContainer.clear()
使用

模板标签

<template>中定义的内容，默认CSS样式display的属性值为none，

星号前缀
星号是结构指令的语法糖，Angular会将带有星号的指令引用替换成带有<template>标签的代码。

<!-- 使用星号 "*" 方式 -->
<p *myUnless="false"> "*" 号方式中的myUnless</p>
<!-- 使用 <template> 标签 -->
<template [myUnless]="false">
  <p> "*" 号方式中的myUnless</p>
<template>

Contents

自定义属性指令

自定义结构指令