Внедрение сервиса в Angular

#angular #dependency-injection

#angular #внедрение зависимостей

Вопрос:

В настоящее время я работаю над руководством по изучению angular. У меня возникли некоторые проблемы — проблема воспроизвести и понять пример о том, как внедрить сервис как зависимость.

Версия Angular: 7.2.9

Поскольку более продвинутые методы отладки еще не были рассмотрены, я попытался найти проблему с помощью console.log(…). Я добавил следующее в свой конструктор app.components:

 export class AppComponent {
  userLogin: UserLoginService;

  constructor() {
    console.log( this.userLogin );
    console.log( UserLoginService );
  }

Это приводит к:

 > undefined
> ƒ UserLoginService() {
        console.log('Hello world from the user login service.');
    }

Сервис определяется как

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

@Injectable({
  providedIn: 'root'
})
export class UserLoginService {
  constructor() {
    console.log( 'Hello world from the user login service.' );
  }
}

затем я пытаюсь использовать его в app.components:

 import { Component } from '@angular/core';
import { UserLoginService } from './user/user-login.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  userLogin: UserLoginService;

  constructor() {
    console.log( this.userLogin );
    console.log( UserLoginService );
  }
}

Я не понимаю, почему элемент userLogin остается undefined . Любой намек на точное определение проблемы был бы высоко оценен.

1. вы должны инициализировать свой объект service внутри кода конструктора.

2. Angular не вводит поля. Он вводит аргументы конструктора. angular.io/guide/dependency-injection#injecting-services . Кстати, даже если он ввел поля, как он мог бы установить поле объекта, если конструктор объекта еще не был выполнен?

Ответ №1:

Сначала вы должны поместить свой сервис в providers, затем внедрить этот сервис в constructor, когда вы добавите свой сервис в providers, тогда будет создан новый экземпляр сервиса.

 import { Component } from '@angular/core';
    import { UserLoginService } from './user/user-login.service';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      providers:[UserLoginService ]
    })
    export class AppComponent {


      constructor(private userLogin:UserLoginService ) {
        console.log( this.userLogin );

      }
    }

1. Сначала вам нужно удалить userLogin . Предоставление private (или других) средств доступа к userLogin в конструкторе означает, что вы определяете свойство элемента. Таким образом, это приведет к дублированию ошибки свойства таким образом.

2. Ах, это по ошибке, я скопировал код Patrik, который я отредактировал в своем ответе. Спасибо

3. Большое спасибо за ответ и объяснение. Я, наконец, получил привет от сервиса.

Ответ №2:

Пожалуйста, используйте, как показано ниже

 import { Component } from '@angular/core';
import { UserLoginService } from './user/user-login.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private userLogin:UserLoginService) {
    console.log( this.userLogin );

  }
}