访问引导服务的变量答案

【问题标题】：Accessing Variable of Bootstrapped Service访问引导服务的变量
【发布时间】：2016-01-26 20:05:53
【问题描述】：

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

它不允许我访问变量，这是为什么呢？

【问题讨论】：

标签： javascript angular angular2-services

【解决方案1】：

您需要在组件中导入服务。在引导程序中，您初始化/构造了它（制作了一个 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;
  // }
}

【讨论】：

谢谢，我对其他示例中的重新声明感到困惑。我的印象是重新声明它使它成为非单例。
如果你把它添加到@Component({ providers: [UserService] })会发生这种情况
这是否意味着我必须将它添加到希望使用该服务的每个组件中？我可以从孩子那里获得父母的服务吗？
你必须导入它并添加到组件的属性中，是的。但不要将其添加到providers 数组中。
@DavidFH，“我可以从孩子那里访问父母的服务吗”——在 Angular 2 中，孩子很少尝试访问父母的属性。范围继承和共享范围属性的概念已经不复存在。父母通过输入属性与孩子共享数据。孩子们通过事件与父母分享数据。所有其他共享通常以这种方式完成 - 使用共享服务，将其注入到需要它的每个组件中。

【解决方案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


            
        });;
    }
}

【讨论】：