Инъекция угловой зависимости - зачем нужен импорт?

Question

В приведенном ниже примере кода app.module устанавливает поставщиков для использования для внедрения зависимостей Angular. Angular, следовательно, имеет ссылку на класс DataService.

// app.module.ts 
import { DataService } from './services/dataService';
import { LocationsComponent } from './components/locations.component';
@NgModule({
  declarations: [
    AppComponent,
    LocationsComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [
    DataService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Насколько я понимаю, в location.component Angular будет выполнять DI для создания нового экземпляра класса DataService в конструкторе. Чего я не понимаю, так это почему в компоненте необходим импорт {DataService}? Почему Angular не может предоставить этот экземпляр DataService конструктору, когда он видит тип DataService, указанный в конструкторе, так как Angular знает из app.module, где найти класс DataService? Импорт {DataService} в location.component представляется излишним.

// locations.component.ts
import { DataService } from '../../../services/dataService';
@Component({
  selector: 'app-locations',
  templateUrl: './locations.component.html'
})
export class LocationsComponent {
  data: any[] = [];
  constructor(private dataService: DataService) { 
      this.data = dataService.load();
  }
}

Answer 1

Мне кажется, я понимаю ваш вопрос. Не то, зачем нужен импорт, но это:

Почему вы должны указывать один и тот же импорт 2 раза, один раз в точке использования (компонент) и один раз в объявлении модуля.

Технически вам вообще не нужно указывать импорт службы в модуле. Атрибут @Component может принимать значение параметра providers, и вы можете указать, каковы зависимости для компонента. Если вы делаете это, вам не нужно объявлять ту же службу в модуле, что и зависимость в модуле.

import { DataService } from '../../../services/dataService';
@Component({
  selector: 'app-locations',
  templateUrl: './locations.component.html',
  providers: [DataService],

})
export class LocationsComponent {
  data: any[] = [];
  constructor(private dataService: DataService) { 
      this.data = dataService.load();
  }
}

Причина, по которой вы указываете это в модуле, состоит в том, чтобы зарегистрировать службу в модуле с помощью структуры внедрения угловой зависимости. В противном случае вам придется делать это (регистрироваться на уровне компонента) каждый раз, когда вы хотите внедрить этот же тип. Регистрируя этот тип на уровне модуля, он также внедряет тот же экземпляр службы, эффективно создавая синглтоноподобный шаблон.