简体   繁体   English

Angular2,EventEmitter 上的订阅属性不存在?

[英]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.我的app.component包含网站的<nav> ,它使用[routerLink]转到不同的页面。 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 :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: 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);
}

In the login page, I just run getLogin then setUser with what the former returned.在登录页面中,我只运行getLogin然后setUser与前者返回的内容。

My problem is that I get the error "Property suscribe does not exist on type EventEmitter<{}>".我的问题是我收到错误“类型 EventEmitter<{}> 上不存在属性订阅”。

using vscode, auto complete added this line:使用 vscode,自动完成添加了这一行:

import { EventEmitter } from ' events ';从'事件'导入{EventEmitter};

i had to change it to the following to resolve this.:我不得不将其更改为以下内容以解决此问题。:

import { EventEmitter } from ' @angular/core ';从' @angular/core '导入{EventEmitter};

Its a typo这是一个错字

Use subscribe , not suscribe使用subscribe ,而不是suscribe

I don't have enough reputation to answer Colum below but that's totally incorrect.我没有足够的声誉来回答下面的 Colum,但这完全不正确。

  1. emit() returns void emit()返回无效
  2. EventEmitter extends (inherits) Subject which is an observable and an observer. EventEmitter扩展(继承) Subject ,它是一个 observable 和一个观察者。

     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(). EventEmitter是一个经过一些修改的 rxjs Subject,最值得注意的是它不使用 next() 向流中发送值,而是使用 emit()。 It also allows setting an async logic where the emit will be async.它还允许设置异步逻辑,其中发射将是异步的。

check for the import of EventEmitter检查 EventEmitter 的导入

it should be import { EventEmitter } from '@angular/core';它应该是import { EventEmitter } from '@angular/core';

It doesn't have a subscribe method as it does not return an observable.它没有 subscribe 方法,因为它不返回 observable。

The emit() method of EventEmitter does however return an observable so you need to create an input which is connected to the event that is emitted.然而EventEmitteremit()方法确实返回一个可观察对象,因此您需要创建一个连接到所发出事件的输入。 You can then subscribe to this.然后你可以订阅这个。

Take a look at this: http://www.syntaxsuccess.com/viewarticle/unit-testing-eventemitter-in-angular-2.0看看这个: http : //www.syntaxsuccess.com/viewarticle/unit-testing-eventemitter-in-angular-2.0

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM