Angular服务

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

服务

在ng6中，功能就是服务，使用什么功能就要引入什么服务

我们要操作指令所在的DOM元素，我们就要引入ElementRef服务

是内置的服务，可以直接引入

为了我们能够在组件中使用服务，我们要使用参数注入的技术，将服务注入到组件中

参数注入

参数注入技术，颠覆我们对函数的认识，

一个函数中有什么可用的参数，不是函数执行的时候说的算，是在函数定义的时候说的算，函数定义的时候，定义了什么形参，函数中就有什么数据。这样就是通过函数的形参，向函数体中注入了数据，这个技术就叫参数注入技术

在ng6中，我们可以通过为形参定义类型的语法，将服务注入到构造函数中，

注意：只有构造函数可以使用参数注入技术，其他的方法不能使用

存储服务

存储服务需要三步

第一步 声明存储服务的属性名称，可以用服务类约束类型

第二步 使用参数注入技术，在构造函数中，注入服务

第三步 在构造函数中，通过this，存储服务

参数注入语法糖

ts提供了很多关键字，如public，private，protected等，

我们可以通过public，private，protected关键字，作为注入语法糖，直接将服务注入到构造函数中，并存储在实例化对象上。

ElementRef

该服务提供了一个属性，nativeElement,代表该容器元素，是一个源生的DOM对象，操作它需要使用源生的DOM API。

监听数据改变

我们可以通过ngOnChanges生命周期方法，来监听数据的改变。再更新视图

举例：

export class ColorDirective {
    // 5 接收数据
    @Input() appColor:string;
    // // 1 声明存储服务的变量
    // // el;
    // el:ElementRef;
    // // 2 参数中注入服务
    // constructor(el: ElementRef) {
        // // 3 构造函数中，存储服务
        // this.el = el;
        // // 6 使用数据
        // console.log(this, arguments)
    // }
    // 使用参数注入语法糖
    constructor(public el: ElementRef) {
        // constructor(private el: ElementRef) {
        // constructor(protected el: ElementRef) {
        // console.log(333, this)
        console.log(this.appColor)
        // 改变颜色
        // el.nativeElement.style.color = this.appColor;
    }
    // 数据改变
    ngOnChanges() {
        // 除了构造函数，其他的函数，都不能参数注入
        this.el.nativeElement.style.color = this.appColor;
    }
}