EventEmitter在共享服务的构造函数中不会发出数据。

23 浏览
0 Comments

EventEmitter在共享服务的构造函数中不会发出数据。

我有一个HomeCmp和Shared Service。

看一下shared service的构造函数。我手动设置了'Guest'字符串，并试图发射UserModel对象。但是它在HomeCmp的ngOnInit中没有接收到对象。

如果你点击按钮，它会工作。有什么建议吗？

当我通过EventEmitter运行应用程序时，如何显示Guest字符串。

service.ts

import {EventEmitter} from 'angular2/core';
import {UserModel} from 'app/models';
export class NavService {
  user:EventEmitter=new EventEmitter();
  constructor() {
    console.log('constructor')
    userDetail=new UserModel();
    userDetail.name="guest";
    userDetail.loggedIn=false;
    console.log(userDetail);
    this.user.emit(userDetail);
  }
  ngOnInit(){ // 只是想检查它是否有帮助。我知道它属于组件的生命周期。
    console.log('onit')
  }
   setUserDetail(str)
  {
    console.log('SetUserDetail started');
    userDetail.name=str;
    userDetail.loggedIn=true;
    this.user.emit(userDetail);
  }
  getUserDetail()
  {
    return this.user;
  }
}

Homecmp.ts

import {Component} from 'angular2/core';
import {NavService} from '../services/NavService';
import {UserModel} from 'app/models';
@Component({
  selector: 'my-app',
  template: `User object:
  {{userData|json}}
  
  `
})
export class HomeCmp {
  constructor(authService:NavService){
        this.authService=authService; 
    }
  setuser()
  {
   this.authService.setUserDetail("micronyks");
  }
     ngOnInit(){
                console.log('here is userInfo');
                this.subscription = this.authService.getUserDetail()
                                    .subscribe((item) => {this.userData=item;
                                                          console.log('Finally i m working');
                                                          console.log(this.userInfo);
                                                         });
     }
    ngOnDestroy() {
    }
}

models.ts

export class UserModel()
{
 private name:string;
 private loggedIn:boolean=false;
}

working Demo

0

1 答案

0 Comments

问题出现的原因是，在共享服务的构造函数中使用EventEmitter时，没有触发数据的发射。解决方法是延迟触发事件，并且在构造函数中使用setTimeout来包裹发射的代码。

具体来说，Angular创建了一个NavService实例，并在此过程中执行构造函数并触发了事件。然后，Angular创建了一个HomeCmp组件实例，并将NavService传递给它。接着，在HomeCmp的构造函数中，注册了对user:EventEmitter的监听器。然而，在此注册之后，没有触发任何事件，因此也无法再接收到事件。

为了延迟触发事件，可以将this.user.emit(userDetail)包裹在一个setTimeout中，如下所示：

setTimeout(() => this.user.emit(userDetail), 1);

这个问题可能只是为了测试目的而存在，实际上在构造函数中触发事件并不是必要的。

如果要绑定userData到视图中，可以使用{{userData|json}}语法来绑定。但是，由于事件被延迟触发，所以无法再使用eventemitter来进行绑定。

以上就是整理出的问题的原因和解决方法的文章。

0