javascripthtmlangulartypescriptevent-handling

Angular2, subscribe property on EventEmitter not existing?


My app.component contains the <nav> of the website, which uses [routerLink] to go to the different pages. It imports each of the pages' components. One of the pages is a login page. If the user is not logged in, I want the navigation to say Login- if the user is, Logout.

In app.component:

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

and in its template:

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

userS is a global service (it is bootstrapped in main.ts and not added as a provider in any of the components I am using it in) I have that looks like this:

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

In the login page, I just run getLogin then setUser with what the former returned.

My problem is that I get the error "Property suscribe does not exist on type EventEmitter<{}>".


Solution

  • Its a typo

    Use subscribe, not suscribe

    I don't have enough reputation to answer Colum below but that's totally incorrect.

    1. emit() returns void
    2. EventEmitter extends (inherits) Subject which is an observable and an observer.

      export declare class EventEmitter<T> extends Subject<T>
      

    an EventEmitter is an rxjs Subject with some modifications, most notably it does not use next() to send a value down the stream but uses emit(). It also allows setting an async logic where the emit will be async.