angular - 在 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。任何指出问题的提示将不胜感激。

标签： angulardependency-injection

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

  }
}