使用 Angular2 服務作為指令（用於 ngIf）

Question

我正在嘗試根據用戶是否登錄（我的用戶服務中的導出參數）來更改 Angular2 中導航欄組件的行為。 我剛剛設置 isLoggedIn 為此返回 true。 不幸的是，鏈接沒有顯示，因為：

angular2.js:23730 例外：在 UserService 上找不到指令注釋

我在應用程序的其他地方使用 UserService 作為常規服務，我可以將它用作指令，而不會干擾其任何其他功能嗎？

導航.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 {}

用戶服務.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;
  }
}

更新：

此外，如果我將服務移動到提供者而不是指令，則該組件根本不顯示，錯誤：

例外：類型錯誤：無法讀取 [UserService.isLoggedIn in NavComponent@2:41] 中未定義的屬性“isLoggedIn”

所以看起來我不能引用那個屬性？

Answer 1

你在你的directives屬性中注入你的服務，因此需要一個@Component或一個@Directive 。

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

您必須注入您的providers財產

providers : [UserService] /// Good!

編輯

所以你的問題更像是我可以使用服務作為指令嗎？ ，答案是否定的。 您必須使用@Component或@Directive注釋您的服務，到那時它不再是一個簡單的服務。