Angular 2构造函数注入与直接访问

Question

第一季度。我有一个带有一些实用程序/帮助器方法的通用实用程序类（没有获取/发布请求）。我要问的第一件事是它应该是一个简单的类还是一个@Injectable 类。因为像这样在任何组件类中导入后两者都可以使用

import { Injectable } from '@angular/core';

Injectable()
export class Utils {
}

或

export class Utils {
}

第二季度。如果它是可注入的，那么我必须在我的组件类中导入它，在构造函数中注入，并且必须在提供者数组中添加，然后我可以使用注入的类/服务的任何方法，例如

import { Utils } from './../shared/utils';

@Component({
    moduleId: module.id,
    selector: 'abc',
    templateUrl: './abc.component.html',
    providers: [Utils]
})

export class DemoComponent implements OnInit {

    constructor(private _u: Utils) { }

    ngOnInit(): void {
        this._u.someMethod();
    }
}

但除此之外，我可以直接访问服务方法而无需构造函数注入，也无需添加提供程序，这是一种类似于

import { Utils } from './../shared/utils';

@Component({
    moduleId: module.id,
    selector: 'abc',
    templateUrl: './abc.component.html'
})

export class DemoComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
        Utils.someMethod();
    }
}

所以我想知道哪种方法更好且值得推荐？

Answer 1

第一季度。如果Utils 不依赖任何其他服务，则不需要@Injectable()，但如果是，则必须使用@Injectable() 装饰器：

   // 1 case

    @Injectable()  // <--- required
    export class Utils {
       constructor(private _otherService : OtherService){}
    }


    // 2 case
    @Injectable()  // <--- not required
    export class Utils {
      constructor(){}
    }

在这两种情况下，您都必须在组件的 providers 数组中添加服务。

第二季度。使用第一种方法，因为它可以通过传递 MockUtils 服务轻松测试您的组件。

Answer 2

当你在构造函数中使用它时，

1. 您在组件中使用单独的服务实例。

2. 当用作 Injectable() 时，应在模块的 providers 数组中声明。

   constructor(private _u: Utils) { }
           ngOnInit(): void {
                   this._u.someMethod();
          }
   
    //private - _u => is specific inside this component
   

在直接访问的情况下，资源按原样使用，可能会产生以下问题

1. 内存泄漏
2. 可重用性较低
3. 对于可观察对象，在取消订阅可观察对象之前，您不能再次订阅它。