Javascript 为什么我们需要通过angular2中的构造函数注入服务？

我在学英语。对构造函数感到困惑。 考虑下面的代码：

import { Component, OnInit } from '@angular/core';
import { FormGroup,FormsModule,FormControl } from '@angular/forms';
import { WeatherService } from '../weather.service';
import { WeatherItem } from '../weather-item';

@Component({
  selector: 'app-weather-search',
  templateUrl: './weather-search.component.html',
  styleUrls: ['../../assets/app.css'],
  //providers: [WeatherService]
})
export class WeatherSearchComponent implements OnInit {

 constructor(private _weatherService : WeatherService) { }

  onSubmit(form : FormGroup){
    //alert(form.value.location);
    this._weatherService.searchWeatherData(form.value.location)
    .subscribe(
        data => {
            const weatherItem = new WeatherItem(data.data.request["0"].query,data.data.weather["0"].maxtempC,data.data.weather["0"].maxtempC);
            this._weatherService.addWeatherItems(weatherItem);
            console.log(form);
        })

  } 

  ngOnInit() {
  }

}

---

这里我们在构造函数中注入“WeatherService”。我们不能在外面做同样的事情吗？构造函数实际上在这里做什么？我们真的需要它吗？

构造函数本身没有做实际的工作。
Angular创建一个新的

WeatherSearchComponent

执行

new WeatherSearchComponent(weatherService);

这将导致

WeatherSearchComponent

中的构造函数接收

weatherService

值

构造器

constructor(private _weatherService : WeatherService)

导致创建一个实例字段

\u weatherService

，并使用从DI传递的值进行初始化

构造函数是唯一容易知道注入服务何时可用和何时不可用的地方

如果服务将传递给字段、setter或方法，则构造函数中的代码将无法访问它，因为构造函数是在外部代码更改设置字段或调用方法之前执行的

此外，对于构造函数之外的代码，假设服务可用是不安全的，因为可以在从外部设置字段之前从构造函数调用此代码

---

对于依赖项注入，将依赖项传递给构造函数是避免大量复杂性的唯一方法。

构造函数本身没有进行实际工作。
Angular创建一个新的

WeatherSearchComponent

执行

new WeatherSearchComponent(weatherService);

这将导致

WeatherSearchComponent

中的构造函数接收

weatherService

值

构造器

constructor(private _weatherService : WeatherService)

导致创建一个实例字段

\u weatherService

，并使用从DI传递的值进行初始化

构造函数是唯一容易知道注入服务何时可用和何时不可用的地方

如果服务将传递给字段、setter或方法，则构造函数中的代码将无法访问它，因为构造函数是在外部代码更改设置字段或调用方法之前执行的

此外，对于构造函数之外的代码，假设服务可用是不安全的，因为可以在从外部设置字段之前从构造函数调用此代码

---

对于依赖项注入，将依赖项传递给构造函数是避免大量复杂性的唯一方法。

构造函数中的依赖项注入始终是更好的选择，在创建组件时，它将获取weatherService作为参数。为了清楚起见，下面是代码片段的传输代码

var WeatherSearchComponent = (function () {
        function WeatherSearchComponent(_weatherService) {
            this._weatherService = _weatherService;
        }
        WeatherSearchComponent.prototype.onSubmit = function (form) {
            var _this = this;
            //alert(form.value.location);
            this._weatherService.searchWeatherData(form.value.location)
                .subscribe(function (data) {
                var weatherItem = new weather_item_1.WeatherItem(data.data.request["0"].query, data.data.weather["0"].maxtempC, data.data.weather["0"].maxtempC);
                _this._weatherService.addWeatherItems(weatherItem);
                console.log(form);
            });
        };
        WeatherSearchComponent.prototype.ngOnInit = function () {
        };
        WeatherSearchComponent = __decorate([
            core_1.Component({
                selector: 'app-weather-search',
                templateUrl: './weather-search.component.html',
                styleUrls: ['../../assets/app.css'],
            })
        ], WeatherSearchComponent);
        return WeatherSearchComponent;
    }());
    exports.WeatherSearchComponent = WeatherSearchComponent;

---

正如您所看到的，javascript代码将weatherService实例传递给函数weatherSearchComponent。

构造函数中的依赖注入总是更好的选择，在创建组件时，它将weatherService作为参数。为了清楚起见，下面是代码片段的传输代码

var WeatherSearchComponent = (function () {
        function WeatherSearchComponent(_weatherService) {
            this._weatherService = _weatherService;
        }
        WeatherSearchComponent.prototype.onSubmit = function (form) {
            var _this = this;
            //alert(form.value.location);
            this._weatherService.searchWeatherData(form.value.location)
                .subscribe(function (data) {
                var weatherItem = new weather_item_1.WeatherItem(data.data.request["0"].query, data.data.weather["0"].maxtempC, data.data.weather["0"].maxtempC);
                _this._weatherService.addWeatherItems(weatherItem);
                console.log(form);
            });
        };
        WeatherSearchComponent.prototype.ngOnInit = function () {
        };
        WeatherSearchComponent = __decorate([
            core_1.Component({
                selector: 'app-weather-search',
                templateUrl: './weather-search.component.html',
                styleUrls: ['../../assets/app.css'],
            })
        ], WeatherSearchComponent);
        return WeatherSearchComponent;
    }());
    exports.WeatherSearchComponent = WeatherSearchComponent;

---

如您所见，javascript代码将weatherService实例传递给函数weatherSearchComponent。

构造函数中的依赖项注入优于使用setter，因为它不允许您忘记注入所需的依赖项。构造函数中的依赖项注入优于使用setter，因为不允许您忘记注入所需的依赖项。