EventEmitter共享服务的构造好好尝试发射数据 [英] EventEmitter in shared service's constructor doens't emit data

问题描述

我有一个 HomeCmp 和共享服务。

看那共享服务的构造。我手动设置'客户'字符串，并试图发出的usermodel对象。不过，这并不接受对象 HomeCmp 的 ngOnInit 。

Look at the shared service's constructor. I have manually set 'Guest' string and trying to emit UserModel object. But it doesn't receive object in HomeCmp's ngOnInit.

如果您按一下按钮，它会奏效。任何建议？

If you click the button, it will work. any suggestion?

我怎么能显示访客字符串当我运行通过应用程序 EventEmitter 。

How can I show Guest string when I run the app through EventEmitter.

service.ts

import {EventEmitter} from 'angular2/core';
import {UserModel} from 'app/models';
export class NavService {

  user:EventEmitter<UserModel>=new EventEmitter();
  constructor() {
    console.log('constructor')

    userDetail=new UserModel();
    userDetail.name="guest";
    userDetail.loggedIn=false;
    console.log(userDetail);
    this.user.emit(userDetail);
  }

  ngOnInit(){ // just wanted to check if it could help or not. I know it belongs to Component's life cycle.
    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: `<div>User object:</div>

  {{userData|json}}
  <button (click)="setuser()">Click</button>
  `
})
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

推荐答案

角创建 NavService 实例，而这样做，则执行构造函数和触发的事件。至于下一步角创建 HomeCmp 组件的一个实例，并将 NavService 。然后在 HomeCmp 的构造为用户：EventEmitter 注册。这个注册后没有任何事件发出的，因此不会再收到。

Angular creates a NavService instance and while doing this, the constructor is executed and the event fired. As next step Angular creates an instance of the HomeCmp component and passes the NavService in. Then in HomeCmps constructor a listener for user:EventEmitter is registered. After this registration no event is emitted and therefore not recieved anymore.

你所想要做的就是延迟触发事件。我假设你的情况是仅用于测试目的，并在实践中在构造函数中触发一个事件是不必要的了。

What you want to do is to delay firing the event. I assume your situation is only for testing purposes and in practice firing an event in the constructor isn't necessary anyway.

为了测试你可以只是包装 this.user.emit（userDetail）; 在的setTimeout

For testing purposes you can just wrap this.user.emit(userDetail); in a setTimeOut

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

回答

Answer

这篇关于EventEmitter共享服务的构造好好尝试发射数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！