Angular2サービスをディレクティブとして使用する（ngIf用）

Question

ユーザがログインしているかどうかに基づいてNavbarコンポーネントの動作をAngular2で変更しようとしています（ユーザサービスのエクスポートされたパラメータ）。私はisLoggedInをtrueに戻すように設定しました。残念ながら、リンクは、表示されていない：私は、アプリ内の他の場所での定期的なサービスとしてUserServiceのを使用

angular2.js:23730 EXCEPTION: No Directive annotation found on UserService

それがいずれかと干渉することなく、ディレクティブとしても使用することができますので、私はそれを行うことができますその他の機能の？

nav.component.ts：

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

import { UserService } from '../user/services/user.service'; 

@Component({ 
    selector: 'nav-bar', 
    template: ` 
    <div class="nav"> 
    <a [routerLink]="['LoginComponent']" *ngIf="UserService.isLoggedIn">Login</a> 
    </div> 
    `, 
    styleUrls: ['client/dev/todo/styles/todo.css'], 
    directives: [ROUTER_DIRECTIVES, UserService], 
    providers: [ ] 
}) 

export class NavComponent {} 

user.service.ts

import { Injectable, Inject } from 'angular2/core'; 
import { Headers, Http } from 'angular2/http'; 

@Injectable() 
export class UserService { 
    private loggedIn = false; 

    constructor(@Inject(Http) private _http: Http) { 
    this.loggedIn = !!localStorage.getItem('auth_token'); 
    } 

    isLoggedIn() { 
    //return this.loggedIn; 
    return true; 
    } 
} 

UPDATE：また

、私はプロバイダではなくディレクティブにサービスを移動した場合は、その後、コンポーネントがまったく表示されない、エラー：

EXCEPTION: TypeError: Cannot read property 'isLoggedIn' of undefined in [UserService.isLoggedIn in NavComponent@2:41]

だから私はそのプロパティを参照することができないようだね？

Answer 1

directivesのサービスにサービスを注入しているため、@Componentまたは@Directiveが必要です。

directives: [ROUTER_DIRECTIVES, UserService], // <<< Not good! Remove it from there! 

あなたのproviders財産

providers : [UserService] /// Good! 

編集中で注入する必要があり

だから、あなたの質問より多くの私は指令としてサービスを利用することができますのようなものですか？の場合、答えは「いいえ」になります。 @Componentまたは@Directiveというサービスに注釈を付ける必要があります。その時にはもう単純なサービスではありません。