Angular 常用装饰器

@Injectable：TypeScript编译器保留类型元数据，Angular在运行时可以根据这些信息来注射指定的对象。否则，运行时将无法解析数据类型。

        如果一个 Service 里面需要依赖其他 Service，需要使用 @Injectable 装饰器进行装饰。

import { Injectable } from '@angular/core';
import { HttpClient } form '@angular/common/http';

@Injectable()
export class UserListService{
    // 将HttpClient服务注入到UserListService
    constructor(
        private hc: HttpClient
    ){}
}

@Self 装饰器：提示注射器，不要向上查找，只在组件自身内部查找依赖。

constructor(
    @Self() public userListService: UserListService
) {}

@Optional装饰器：沿着 Injector Tree 向上找一遍，如果找到了需要注入的类型，就创建实例;
                                如果啥都没找到，直接赋值为 null，不抛异常。

constructor(
    @Optional() public userListService: UserListService
) {}

@Self 与 @Optional 组合使用:

         @Self 装饰器限定了查找范围，所以只在 ChildComponent 自身内部进行查找，父层组件有没有定义对应的服务，不会产生任何影响;

        @Optional 装饰器，所以如果 ChildComponent 自身内部提供了对应的服务，就创建实例，否则就直接赋值为 null，不抛异常。    

constructor(
    @Self() @Optional() public userListService:UserListService 
){}

@SkipSelf装饰器：跳过组件自身，然后沿着 Injector Tree 向上查找。

constructor(
    @SkipSelf() public userListService: UserListService
) {}

@SkipSelf 与 @Optional 组合使用：

        使用了 @SkipSelf 装饰器，所以直接跳过子组件自身，从 Injector Tree 的父层节点向上进行查找，也就是说，不管子组件自己有没有配置 UserListService 都不起作用，因为跳过去了;

        使用了 @Optional 装饰器，如果在父层上面找到了指定的类型，那就创建实例;否则，直接设置为 null，不抛异常。

constructor(
    @SkipSelf() @Optional() public userListService: UserListService
) {}

@Host装饰器: 用来在被投影的组件和它的宿主之间构建联系的。

Content Projection(内容投影):两个组件都将变的很灵活，不会出现谁离不开谁的情况。

@Host装饰器与Content Projection的使用：

待完成……