javascript - 访问引导服务的变量

Question

我正在尝试了解服务注入(inject)在 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;
  }
}

我将其注入(inject)到 Bootstrap 中，以便我可以在整个应用程序中访问它，如下所示:

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

然后我尝试在我的组件 View 之一中访问它，但无法访问。我试过这样访问它:

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 中，您初始化/构建了它(制作了一个 单例 - 意味着所有组件的一个实例)，但您必须导入并将其分配给组件属性才能使用它。组件的模板只能访问组件的属性和方法...

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;
  // }
}