访问引导服务的变量

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

我将其注入 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]);

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

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 你 initialized/constructed 它（做了一个单例 - 意味着所有组件的一个实例），但是你必须导入并将它分配给组件属性才能使用它。组件的模板只能访问组件的属性和方法...

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 答案的替代方法。当我需要执行一些其他登录或注销相关操作时，我会使用这种方法。

用户服务：

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

导航栏组件：

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


            
        });;
    }
}

访问引导服务的变量

Accessing Variable of Bootstrapped Service

javascript

angular

angular2-services