在Angular中注入服务

Question

我目前正在通过教程来学习角度。 我有一些问题需要重现，并要理解有关如何将服务作为依赖项注入的示例。

角版本：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 。 任何指出问题的提示将不胜感激。

Answer 1

请按以下方式使用

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 );

  }
}

Answer 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'],
      providers:[UserLoginService ]
    })
    export class AppComponent {


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

      }
    }