装饰器（注解）

装饰器本身就是一个函数， 但是它的返回值也是一个函数
它是Typescript的一个特性，而非Angular特性
https://www.tslang.cn/docs/handbook/decorators.html

fucntion color(value:string){  //这是一个装饰器工厂
  return function (target) { //这就是一个装饰器
      //do something with 'target' and 'value' ...
  }
}

自定义作用于属性的装饰器

比如我们自定义一个@Hello 装饰器， 用于返回Hello ！ xxx
新建一个decorators文件夹用于存在装饰器，创建index.ts 文件：

export function Hello(){
    //返回一个匿名函数， target 指向类就是你所应用组件，key就是作用的对象
    return (target:object, key: string) => {
        let val = target[key];
        const getter = () => {
            return val;
        }
        const setter = (value:string) => {
            val = `hello ! ${value}`
        }
        //这里用js 的defineProperty
        Object.defineProperty(target,key,{
            get:getter,
            set:setter,
            enumerable:true,
            configurable:true
        })
    }
}

在你使用的地方引用这个装饰器

import { Component } from '@angular/core';
import { Hello  } from './decorators'; // 引入注解

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @Hello() title = 'Mike'  //使用注解
}

自定义作用于函数的装饰器（带参数）

比如顶一个在函数执行之前弹出确认框的装饰器，@Confirmable

export function Confirmable(message: string) {
    return (target: object, key:string, descriptor: PropertyDescriptor) => {
        const original = descriptor.value;
        descriptor.value = function(...args:any){
            const allow = window.confirm(message);
            if(allow) {
                const result = original.apply(this,args)
                return result
            }
            return null;
        };
        return descriptor;
    }
}

使用装饰器

//在函数之前引用装饰器，作用于这个函数
  @Confirmable('do you confirm click this ?')
  handleClick(){
    console.log("you clicked the img")
  }

内容投影

为什么会有内容投影

image.png

内容投影是从组件外部导入HTML内容，并把它插入在组件模版中指定的位置上的一种途径。
你可以在目标中通过查找下列结构来认出内容投影

• 元素标签中间的HTML
• 组件模版中的<ng-content> 标签

简单来说投影组件ng-content 就是动态内容

表现形式

<ng-content select="样式类/HTML标签/属性/指令"></ng-content>

适用场景

• 动态内容
• 容器组件

使用方法

无差别映射
将映射写入的所有内容

子组件hello.component.html：

<ng-content></ng-content> 

父组件：

<app-hellow>
  <div class="title">this is a div with class</div>
  <div id="demoId">this id a div with id</div>
  <span>this is a span tag</span>
</app-hellow>

页面显示：

image.png

选择性映射
通过select来进行选择性映射
可以选择class 、标签、指令和任意属性
选择class

<ng-content select=".title"></ng-content>

image.png

通过标签选择

<ng-content select="span"></ng-content> 

通过任意属性

<ng-content select="[id=demoId]"></ng-content> //这里可以是任意属性