3

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

次に、コンポーネント ビューの 1 つでこれにアクセスしようとしましたが、アクセスできません。私は次のようにアクセスしようとしました：

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

変数にアクセスできません。なぜですか?

4

2 に答える 2

1

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

NavbarComponent:

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


            
        });;
    }
}

于 2016-01-26T20:41:32.903 に答える
1

コンポーネントにサービスをインポートする必要があります。ブートストラップでは、それを初期化/構築しました（シングルトンを作成しました-すべてのコンポーネントに対して1つのインスタンスを意味します）が、それを使用できるようにするには、それをインポートしてコンポーネントプロパティに割り当てる必要があります。コンポーネントのテンプレートは、コンポーネントのプロパティとメソッドにしかアクセスできません...

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;
  // }
}
于 2016-01-26T20:21:32.060 に答える