2016-07-07 17 views
1

私のapp.componentには、ウェブサイトの<nav>が含まれています。[routerLink]を使用すると、別のページに移動します。各ページのコンポーネントをインポートします。 1つはログインページです。ユーザーがログインしていない場合は、「ログイン」(ユーザーが「ログアウト」の場合)と言うナビゲーションが必要です。Angular2、EventEmitterのsubscribeプロパティは存在しませんか?

my_userO : userO = undefined; 

constructor (private my_userS:userS){ 
    my_userS.userChanged.suscribe(temp => this.updateNav()); 

updateNav(){ 
    this.my_userO = this.my_userS.getUser(); 
} 

logOut(){ 
    this.my_userS.setUser(undefined); 
} 

とそのテンプレートで:

app.component

<li><a *ngIf="!my_userO" [routerLink]="['LoginPage']">Login</a></li> 
<li><a *ngIf="my_userO" [routerLink]="['HomePage']"(click)="logOut()">Logout</a></li> 

userSは(それがmain.tsにブートストラップと私はコンポーネントのいずれかにプロバイダとして追加されていないグローバルなサービスですそれを使用して)私はこのように見える:

public userChanged: EventEmitter<{}> 
currentUser : userO = undefined; 

constructor(private http:Http){ 
    this.userChanged = new EventEmitter(); 
} 

getLogin(username: string, password: string): Promise<userO>{ 
    return this.http.get(this.getLoginUrl+username).toPromise().then(response => response.json().data).catch(this.handleError); 
} 

getUser(){ 
    return this.currentUser; 
} 

setUser(x_userO: userO){ 
    this.currentUser = x_userO; 
    this.userChanged.emit(undefined); 
} 

ログインページでは、getLoginを実行してからsetUserを返します。

私の問題は、「プロパティサンクスクライブがタイプEventEmitter < {}>に存在しません」というエラーが表示されることです。

答えて

3

そのタイプミス

使用してサブスクライブ、ない

をsuscribe私はColum怒鳴るに答えるために十分な評判を持っていないが、それは完全に間違っています。

1)emit()はvoid を返します。2)EventEmitterは、オブザーバブルとオブザーバであるSubjectを継承します(継承します)。

エクスポート宣言クラス持つEventEmitterが最も顕著なことは()ストリームダウン値を送信するために次の使用が、放射使用しない、件名

持つEventEmitterは、いくつかの変更を加えてrxjs対象で延びています()。 また、エミットが非同期になる非同期ロジックを設定することもできます。

+0

ありがとう...申し訳ありませんが、私は他の誰かの例に従っていたので、なぜそれがうまくいかなかったのか分かりませんでした。そして、angular.ioのdocがsubscribeプロパティを示しました...もっと睡眠を取る必要があります。今コンパイルしますが、後でテストすることはできません。 – Yifan

+0

ugh ... dat facepalm私はsuscribeが少なくとも30分は定義されていない理由を理解していないときに... –

0

オブザーブ可能なメソッドを返さないため、サブスクライブするメソッドはありません。

emit()メソッドはEventEmitterですが、観測可能な値を返しますので、出力されるイベントに接続された入力を作成する必要があります。 これを購読することができます。

はこれを見てください: http://www.syntaxsuccess.com/viewarticle/unit-testing-eventemitter-in-angular-2.0

関連する問題