Question

我正在尝试了解Angular 2中的服务注入是如何工作的。我创建了一个应用程序和一个服务。我的服务如下：

import {Injectable} from 'angular2/core';

@Injectable()

export class UserService {
  logged: boolean;
  users: Array<any>;

  constructor () {
    this.logged = false;
    this.users = [
      {username: 'david', password: 'password'}
    ]
  }

  checkLogin (username, password) {
    this.users.forEach((user) => {
      if (user.username == username && user.password == password) {
        this.logged = true;
        return true;
      } else {
        this.logged = false;
        return false;
      }
    })
  }

  logOut () {
    this.logged = false;
  }
}

我将它注入引导程序，以便我可以在整个应用程序中访问它，如下所示：

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './components/app.component'
import {ROUTER_PROVIDERS} from 'angular2/router';
import {UserService} from './services/user.service';

bootstrap(AppComponent, [ROUTER_PROVIDERS, UserService]);

然后我尝试在我的一个组件视图中访问它，但不能这样做。我试图像这样访问它：

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";

@Component({
  selector: 'navbar',
  template: '<li><a>{{UserService.logged}}</a></li>',
  directives: [ROUTER_DIRECTIVES],
})

export class NavbarComponent {
}

它不允许我访问变量，为什么会这样？

Answer 1

您需要在组件中导入服务。在bootstrap中，您初始化/构造它（创建一个 singleton - 意味着所有组件的一个实例），但您必须导入并将其分配给组件属性才能使用它。组件的模板只能访问组件的属性和方法...

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {UserService} from './services/user.service';

@Component({
  selector: 'navbar',
  template: '<li><a>{{userService.logged}}</a></li>',
  directives: [ROUTER_DIRECTIVES],
})

export class NavbarComponent {
  // this way you let TS declare it
  constructor(public userService: UserService) {}
  // this is same as:
  // userService;
  // constructor(userService: UserService) {
  //   this.userService = userService;
  // }
}

Answer 2

这是Sasxa答案的替代方案。当我需要做一些其他登录或注销相关的操作时，我使用这种方法。

UserService：

＆＃13;

import {Injectable, EventEmitter} from 'angular2/core';

@Injectable()
export class UserService {
  public doLoginUpdate: EventEmitter<boolean> = new EventEmitter();
  logged: boolean;
  users: Array<any>;

  constructor () {
    this.logged = false;
    this.users = [
      {username: 'david', password: 'password'}
    ]
  }

  checkLogin (username, password) {
    this.users.forEach((user) => {
      if (user.username == username && user.password == password) {
        this.logged = true;
        return true;
      } else {
        this.logged = false;
        return false;
      }
    })
    this.doLoginUpdate.emit(this.logged);
  }

  logOut () {
    this.logged = false;
    this.doLoginUpdate.emit(this.logged);
  }
}

＆＃13;

NavbarComponent：

＆＃13;

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {UserService} from './services/user.service';

@Component({
  selector: 'navbar',
  template: '<li><a>{{logged}}</a></li>',
  directives: [ROUTER_DIRECTIVES],
})

export class NavbarComponent {
    logged: boolean = false;
    constructor(
        private userService: UserService) {
        this.userService.doLoginUpdate.subscribe((logged)=>{
            this.logged = logged;
            //do something important related to logging in or logging out


            
        });;
    }
}

＆＃13;

访问Bootstrapped服务的变量

2 个答案: