装饰器（注解）
装饰器本身就是一个函数， 但是它的返回值也是一个函数
它是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> //这里可以是任意属性
