Question

我正在学习Angular 2.并且对构造函数感到困惑。请考虑以下代码：

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() {
  }

}

我们正在注入＆＃39; WeatherService＆＃39;在构造函数中。我们不能做同样的外部构造函数吗？实际上构造函数在这里做什么？我们真的需要吗？

Answer 1

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

new WeatherSearchComponent(weatherService);

这会导致WeatherSearchComponent中的构造函数接收weatherService值。

构造函数

constructor(private _weatherService : WeatherService)

导致创建实例字段_weatherService并使用从DI传递的值进行初始化。

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

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

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

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

Answer 2

构造函数中的依赖注入总是更好的选择，当组件被创建时，它会将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。

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

2 个答案: